Trigger jQuery animated number counter on window scroll

Question

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

Original jQuery code from here

$('.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:

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

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.

Answer 1

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).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> 

Answer 2

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;

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> 

Answer 3

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