jQuery - 这段代码如何在没有滚动的情况下执行？

Question

我编写这个 jQuery 是为了添加一个 css 类，以便在页面滚动到某个元素时为其设置动画，但是如果我在元素位于视口(viewport)内时刷新页面，则根本不会滚动而触发动画。

这实际上是我希望它的工作方式，但我不明白它是如何以这种方式工作的。 .scroll 绑定(bind)在页面滚动之前不应该被触发吗？

我需要弄清楚这一点的原因是，当动画在页面刷新时播放并且元素可见时，它似乎切断了它的第一部分。就像在我的演示中一样， slider 正下方的标题区域显示“为什么不添加标题......”动画从 .1 不透明度淡入淡出到 1，但是由于元素靠近页面顶部，动画页面加载后立即添加，它发生得如此之快，您几乎看不到它。

http://bbmthemes.com/themes/smart/

<script type="text/javascript">
// element animation
(function ($, document, undefined) {

    $(window).scroll(function() {
    var animation1 = $('.animation1').offset().top;
    var animation2 = $('.animation2').offset().top;
        var winTop = $(window).scrollTop();
        var winHeight = $(window).height()-175;
        var winWidth = $(window).width();

        if(winWidth <= 750){
        $('.animated').addClass("opacity1");
        }

        if(winTop >= (animation1-winHeight)){
        $('.animation1').addClass("animate-fade");
        }
        if(winTop >= (animation2-winHeight)){
        $('.animation2').addClass("animate-fade");
        }
    });
})(jQuery, document);
</script>

Answer 1

抱歉，我无法准确判断，但您可以尝试在事件处理程序的顶部添加 alert('scrolling'); 进行调试。

这将在事件首次触发时立即暂停页面加载，并为您提供更多关于何时页面认为它正在滚动的线索。这可能会发现导致它的原因。

但是，是的，您认为页面加载时不会触发 .scroll 是正确的。