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

Trigger jQuery animated number counter on window scroll

提问by user3742990

I'm trying to get this jQuery animated counter to trigger as soon as the user scrolls more than 200 pixels down the page:

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

Original jQuery code from 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));
        }
    });
});

I've tried to wrap it in the following jQuery but it doesn't trigger the animation until the end:

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

HTML：

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

The fiddle from the other post is here

另一个帖子的小提琴在这里

What would be the best way to trigger the jQuery counter as soon as the user scrolls into view or 200 pixels down the page? I've also tried the jQuery Wayfinder but not had any luck with making it work.

一旦用户滚动到视图中或向下滚动 200 像素，触发 jQuery 计数器的最佳方法是什么？我也尝试过 jQuery Wayfinder，但没有让它工作。

回答by gilly3

Unbind the scroll handler (with $(window).off("scroll")) before triggering the animation to prevent the animation from restarting if the user continues to scroll.

$(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>

回答by maioman

Gilly's answer is a good one, but it's missing the part for making it start at 0 and get to a certain value;

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

this is what you could do:

这是你可以做的：

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>

回答by maioman

maybe a little late, but this code works when you get at the bottom of the page

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

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