在视口

Question

我有一个jquery数字计数器，它开始计算页面滚动，这很好。但是我面临两个问题：

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>