Compteur de nombre Jquery lorsqu'il est visible sur la fenêtre

Question

J'ai un compteur de nombres jquery qui commence à compter sur le défilement de la page, ce qui est correct. Cependant, je suis confronté à 2 problèmes:

1- Lorsque vous chargez la page et ne faites pas défiler les numéros restent invisibles. Ils devraient commencer à compter quand ils sont visibles sur la fenêtre.

2- Lorsque vous faites défiler les nombres, commencez à compter, mais ils le font tous, y compris ceux qui ne sont pas visibles dans la fenêtre. Ils devraient compter à mesure qu'ils entrent en vue un à la fois.

S'il vous plaît jeter un oeil à la démo: https://fiddle.jshell.net/5L8ue4zg/

Merci!

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>