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

【问题标题】：jQuery - How is this code executing without scroll?jQuery - 这段代码如何在没有滚动的情况下执行？
【发布时间】：2013-08-08 05:13:45
【问题描述】：

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

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

我需要弄清楚这一点的原因是，当动画在页面刷新时播放且元素可见时，它似乎切断了它的第一部分。就像在我的演示中一样，滑块正下方的标题区域显示“为什么不添加标题...”具有从 0.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>

【问题讨论】：

标签： jquery css animation scroll

【解决方案1】：

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

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

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

【讨论】：