.addClass 在最初加载的元素上

Question

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

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

问题：如何检测初始加载的<section>是否在视口中，然后.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

Answer 1

我不确定你在问什么。这是您要找的吗？

var updateScroll = function() {
  $('.animation-element').each(function() {
    ...
  }
}
$(window).scroll(updateScroll);
updateScroll();

Answer 2

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

$(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
}

.addClass 在最初加载的元素上

.addClass on initially loaded element

javascript

jquery

scroll

viewport