javascript - .addClass 在最初加载的元素上

Question

情况: 我编写了一个函数来检测是否 <section>已通过滚动进入视口(viewport)，如果是的话 .addClass('fadeInUp')否则.removeClass('fadeInUp')导致.animation-element在视口(viewport)中淡入。

问题:因为条件绑定(bind)到滚动函数，所以第一个 <section>最初加载的不是 .addClass('fadeInUp')直到用户滚动过去然后滚动回 <section> 。 View JS Fiddle for example

问题:我如何检测最初加载的 <section>在视口(viewport)中，则 .addClass('fadeInUp')等等...

当前 JS 函数:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function() {
    $('.animation-element').each(function() {
        if (isScrolledIntoView(this) === true) {
            $(this).addClass('fadeInUp')
        } else {
            $(this).removeClass('fadeInUp')
        }
    });
});

这是 JS Fiddle原型(prototype)。

Answer 1

只需在页面加载时在事件处理程序外部调用您在事件处理程序内部调用的相同代码即可。

$(function () {

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    function checkElements(selector) {
        $(selector).each(function() {
            if (isScrolledIntoView(this) === true) {
                $(this).addClass('fadeInUp')
            } else {
                $(this).removeClass('fadeInUp')
            }
        });
    }

    $(window).scroll(function() {
        checkElements('.animation-element'); // <-- check on scroll
    });

    checkElements('.animation-element'); // <-- check on page load
}