爲什麼在達到目標後倒計時？

Question

我想有一個計數器，只激活實際上當屏幕上。我已經設法從我發現的其他例子中解決了這個問題。

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/

的問題是，它達到200，然後計數回落到0，但我希望它只是停留在200。我似乎無法找出什麼真正導致它雖然。

Answer 1

的問題是，你創造了超過1個動畫，開始計數後，所以回到1，我有一個固定的標誌，但也許你能與高度的東西，檢查了這一點。

這裏了標誌的修復：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; 
      } 
     }); 
    }); 
    } 
});