javascript - 由滚动值触发的 jquery 数字计数器动画

Question

所以我试图制作一个由特定滚动值触发的计数器，换句话说，我希望用户在达到某个滚动值时看到从 0 到指定数字的动画数字

这就是我到目前为止所做的:

$(document).scroll(function(){

    var _scrollTop = $(document).scrollTop();

    if(_scrollTop >= 1490){
        $('.Count').each(function () {
            var $this = $(this);
                jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                    duration: 3000,
                    easing: 'swing',
                    step: function () {
                        $this.text(Math.ceil(this.Counter)).stop();
                    }
                });
        }); 
    }
}); 

但每次我滚动到该值上方时，数字都会不断刷新，我希望它在用户滚动到该值上方时为其设置动画一次，然后保持在 html 上的指定值上非常感谢您的帮助

Full site Fiddle

Answer 1

如果滚动函数不需要再次运行，在第一次满足条件(启动计数器)后，您可以选择完全解除绑定(bind)该函数:

if(_scrollTop >= 1490){
    $(document).unbind('scroll');
    //......

这将取消绑定(bind)文档上的所有绑定(bind)滚动事件，如果您实现多个滚动事件，您可以将特定委托(delegate)存储在一个变量中并取消绑定(bind)。