Javascript 触发窗口滚动上的jQuery动画数字计数器

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

源代码的原始jQuery代码

我尝试将其包装在以下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:

100


200


300

另一根柱子上的小提琴是

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

在触发动画之前取消绑定滚动处理程序（使用

$（窗口）。关闭（“滚动”）

），以防止用户继续滚动时动画重新启动

$（窗口）。滚动（开始计数器）；
函数startCounter（）{
如果（$（窗口）.scrollTop（）>200）{
$（窗口）.off（“滚动”，startCounter）；
$（'.Count'）。每个（函数（）{
var$this=$（this）；
jQuery（{Counter:0}）.animate（{Counter:$this.text（）}{
持续时间：1000，
放松:"摇摆",，
步骤：函数（）{
$this.text（Math.ceil（this.Counter））；
}
});
});
}
}

正文{
字体系列：无衬线；
高度：300vh；
}
.伯爵{
位置：固定；
顶部：8px；
左：8px；
}

100

Gilly的答案很好， 但它缺少使其从0开始并达到某个值的部分

这就是你可以做的：

var-stop=$（“#someElement”）.offset（）.top；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>停止）{
$（窗口）。关闭（“滚动”）；
$（'.Count'）。每个（函数（）{
var$this=$（this）；
jQuery（{Counter:0}）.animate（{Counter:$this.attr（“data”）}{
持续时间：1000，
放松:"摇摆",，
步骤：函数（）{
$this.text（Math.ceil（this.Counter））；
}
});
});
}
});
正文{
字体系列：无衬线；
高度：300vh；
}
.伯爵{
位置：固定；
顶部：8px；
左：8px；
}

0
可能有点晚，但当您到达页面底部时，此代码会起作用

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;
            }
        })
    }
    );

对我有用：你说的“直到最后才触发动画”是什么意思？什么结束了？它不工作@gilly3-向下滚动，数字只是在1和0之间摆动-我希望当用户向下滚动时，数字从0开始向上计数（例如向下滚动200像素）。如果在动画开始后继续滚动，动画将重新启动。动画从div中的当前值中获取结束值。由于动画当前正在进行，因此该数字将更低。这就是为什么您会看到它在1和0之间摆动。在动画开始后不久，您重新启动了动画，但只得到了1。有很多方法可以解决这个问题。您希望动画运行多少次？就一次？每次？只要用户向下滚动200像素，动画就可以在@gilly3运行一次，这样他们就可以看到正在播放的数字有没有办法在滚动超过某个类或id而不是向下滚动200像素时触发动画@gilly3代替硬编码
200
，使用
$（window.scrollTop（）>$（“#someElement”）.offset（）.top（）
我尝试了if（$（window.scrollTop（）>$（“#someElement”）.offset（）.top（））{。而且它在@gilly3（也把id放在元素上）不起作用。对不起，我的错误，
.top
没有括号。它应该是
$（window.scrollTop）（）>$（“#someElement”）.offset（）.top
$（窗口）.off（“滚动”）；已导致我的导航栏活动状态在选中时停止高亮显示-是否有其他方法阻止它与导航栏a标记活动状态冲突？是否有方法在它滚动超过某个类或id时触发它，而不是在它向下滚动200像素时触发它？@maiomanI编辑了该片段，但它不起作用，但理论是：you get设置id偏移量的值，然后在（$（窗口）.scrollTop（）>stop）$（窗口）.off（“scroll”）；中进行设置已导致我的导航栏活动状态在选中时停止高亮显示-是否有其他方法阻止它与导航栏a标记活动状态冲突？
<span class="Count">100</span>
<br/>
<span class="Count">200</span>
<br/>
<span class="Count">300</span>

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;
            }
        })
    }
    );