在窗口滚动时触发 jQuery 动画数字计数器答案

【问题标题】：Trigger jQuery animated number counter on window scroll在窗口滚动时触发 jQuery 动画数字计数器
【发布时间】：2016-07-12 04:40:18
【问题描述】：

我试图让这个 jQuery 动画计数器在用户向下滚动页面超过 200 像素时触发：

来自here的原始jQuery代码

$('.Count').each(function () {
    var $this = $(this);
    jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
        duration: 1000,
        easing: 'swing',
        step: function () {
            $this.text(Math.ceil(this.Counter));
        }
    });
});

我尝试将它包装在下面的 jQuery 中，但它直到最后才触发动画：

$(window).scroll(function() {
    if ($(window).scrollTop() > 200) {
        $('.Count').each(function () {
            var $this = $(this);
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 1000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
    }
});

HTML：

<span class="Count">100</span>
<br/>
<span class="Count">200</span>
<br/>
<span class="Count">300</span>

另一个帖子的小提琴是here

当用户滚动到视图或页面向下 200 像素时触发 jQuery 计数器的最佳方式是什么？我也尝试过 jQuery Wayfinder，但没有成功。

【问题讨论】：

为我工作：jsfiddle.net/Yy6r6/420“直到最后才触发动画”是什么意思？什么结局？
它不起作用@gilly3 - 向下滚动并且数字只是在 1 和 0 之间滑动 - 我希望它们在用户向下滚动时从 0 开始计数（例如向下滚动 200 像素）
如果在动画开始后继续滚动，动画会重新开始。动画从 div 中的当前值获取结束值。由于动画目前正在进行中，因此数量会更低。这就是为什么您看到它在 1 和 0 之间闪烁的原因。您在动画开始后不久重新启动了动画，并且只达到了 1。有很多方法可以解决这个问题。您希望动画运行多少次？就一次？每次？
只要用户向下滚动 200 像素，就希望动画运行一次 @gilly3，以便他们看到正在动画的数字

标签： javascript jquery html animation

【解决方案1】：

在触发动画之前取消绑定滚动处理程序（使用$(window).off("scroll")），以防止在用户继续滚动时动画重新启动。

$(window).scroll(startCounter);
function startCounter() {
    if ($(window).scrollTop() > 200) {
        $(window).off("scroll", startCounter);
        $('.Count').each(function () {
            var $this = $(this);
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 1000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
    }
}

body {
    font-family: sans-serif;
    height: 300vh;
}
.Count {
    position: fixed;
    top: 8px;
    left: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Count">100</div>

【讨论】：

有没有办法在它滚动到某个类或 id 时触发它，而不是在它向下滚动 200 像素时触发它？ @gilly3
不要硬编码200，而是使用$(window).scrollTop() > $("#someElement").offset().top()
我试过 if ($(window).scrollTop() > $("#someElement").offset().top()) { 它不起作用@gilly3（也把id 上的元素）
抱歉，我的错误，.top 没有括号。应该是$(window).scrollTop() > $("#someElement").offset().top。 jsfiddle
$(window).off("scroll");已导致我的导航栏活动状态在选择时停止突出显示 - 是否有另一种方法可以阻止它与导航栏的标签活动状态冲突？

【解决方案2】：

Gilly 的回答很好，但它缺少让它从 0 开始并达到某个值的部分；

这是你可以做的：

var stop = $("#someElement").offset().top;
    $(window).scroll(function() {
        if ($(window).scrollTop() > stop ) {
            $(window).off("scroll");
            $('.Count').each(function () {
                var $this = $(this);
                jQuery({ Counter: 0 }).animate({ Counter: $this.attr("data") }, {
                    duration: 1000,
                    easing: 'swing',
                    step: function () {
                        $this.text(Math.ceil(this.Counter));
                    }
                });
            });
        }
    });

body {
    font-family: sans-serif;
    height: 300vh;
}
.Count {
    position: fixed;
    top: 8px;
    left: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Count" data=200>0</div>

【讨论】：

有没有办法在它滚动到某个类或 id 时触发它，而不是在它向下滚动 200 像素时触发它？ @maioman
我编辑了sn-p，它不起作用，但理论是：你得到id偏移的值，然后设置在($(window).scrollTop() > stop)
$(window).off("scroll");已导致我的导航栏活动状态在选择时停止突出显示 - 是否有另一种方法可以阻止它与导航栏的标签活动状态冲突？

【解决方案3】：

可能有点晚了，但是当您到达页面底部时，此代码可以工作

jQuery(         
    function($)
    {
        var banderaEstandar= true;
        $('#vista').on('scroll', function()
        {
            if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight && banderaEstandar)
            {
                $('.count').each(function () {
                $(this).prop('Counter',0).animate(
                {
                    Counter: $(this).text()
                }, 
                {
                    duration: 1000,
                    easing: 'swing',
                    step: function (now) {
                    $(this).text(Math.ceil(now));
                }
                });
                });
                banderaEstandar=false;
            }
        })
    }
    );

【讨论】：