最初加载的元素上的.addClass

Question

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

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

问题：如何检测最初加载的<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小提琴 。

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
}

Answer 2

我不确定你在问什么。 这是你想要的？

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