javascript - Why is this counting down after reaching the target? -

i wanted have counter activates when on screen. i've managed mangle other examples i've found.

html:

<div>scroll down</div> <span class="count">200</span> 

css:

div {    height:800px;    background:red; } h1 {    display:none; } 

javascript:

$(window).scroll(function() {     var ht = $('#scroll-to').offset().top,         hh = $('#scroll-to').outerheight(),         wh = $(window).height(),         ws = $(this).scrolltop();     console.log((ht - wh), ws);     if (ws > (ht + hh - wh)) {         $('.count').each(function() {             $(this).prop('counter', 0).animate({                 counter: $(this).text()             }, {                 duration: 4000,                 easing: 'swing',                 step: function(now) {                     $(this).text(math.ceil(now));                 }             });         });     } }); 

demo:

https://jsfiddle.net/76d57vjl/

the problem is, reaches 200 , counts down 0 want stay @ 200. can't seem figure out whats causing though.

the problem creating more 1 animation, going 1 after starting count, fixed flag, make heights check out.

here's fix flag: https://jsfiddle.net/uc0av8fh/

var flag = true; $(window).scroll(function() { $('#scroll-to');    var ht = $('#scroll-to').offset().top,        hh = $('#scroll-to').outerheight(),        wh = $(window).height(),        ws = $(this).scrolltop();     console.log((ht-wh) , ws);    if (ws > (ht+hh-wh)){     $('.count').each(function () {       if(!flag) return;       //console.log();       flag = false;       $(this).prop('counter',0).animate({           counter: $(this).text()       }, {           duration: 4000,           easing: 'swing',           step: function (now) {               $(this).text(math.ceil(now));               return 1;           }       });     });    } });