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

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

$(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();

最初加载的元素

2 个答案: