滚动值触发的jQuery数字计数器动画答案

【问题标题】：jquery number counter animation triggered by scroll value滚动值触发的jQuery数字计数器动画
【发布时间】：2023-04-02 19:45:01
【问题描述】：

所以我试图制作一个由某个滚动值触发的计数器，换句话说，我希望用户在达到某个滚动值时看到从 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

【问题讨论】：

请尝试提供小提琴
@GovindSinghNagarkoti 添加了

标签： javascript jquery css animation numbers

【解决方案1】：

如果滚动功能不必再次运行，在第一次满足条件后（计数器启动），您可以选择完全取消绑定功能：

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

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

【讨论】：