ビューポートに表示されているJquery number counter

Question

jquery numberカウンタがあり、ページスクロールのカウントが開始されます。しかし、私は2つの問題に直面しています：

1-ページを読み込んでスクロールせずに数字が見えなくなったとき。ビューポートに表示されたらカウントダウンを開始する必要があります。

2スクロールすると数字がカウントされますが、ビューポートには表示されない数字も含まれます。彼らは一度に一つに見えるようにカウントする必要があります。

は、デモを見てください：https://fiddle.jshell.net/5L8ue4zg/

ありがとうございました！

JS

var a = 0; 
$(window).scroll(function() { 

    var oTop = $('.counter-box').offset().top - window.innerHeight; 
    if (a == 0 && $(window).scrollTop() > oTop) { 
    $('.counter').each(function() { 
     var $this = $(this), 
     countTo = $this.attr('data-count'); 
     $({ 
     countNum: $this.text() 
     }).animate({ 
      countNum: countTo 
     }, 

     { 

      duration: 7000, 
      easing: 'swing', 
      step: function() { 
      $this.text(Math.floor(this.countNum)); 
      }, 
      complete: function() { 
      $this.text(this.countNum); 
      //alert('finished'); 
      } 

     }); 
    }); 
    a = 1; 
    } 

}); 

Answer 1

<div class="counter-box"> 
    <span class="counter" data-count="200">0</span> 
</div> 
<div class="counter-box"> 
    <span class="counter" data-count="500">0</span> 
</div> 
<div class="counter-box"> 
    <span class="counter" data-count="1400">0</span> 
</div> 
<div class="counter-box"> 
    <span class="counter" data-count="800">0</span> 
</div> 
<div class="counter-box"> 
    <span class="counter" data-count="1000">0</span> 
</div>