jquery - 在滚动条上运行 jQuery 数字计数器

Question

我有一个 jQuery 数字计数器，效果很好，但它会在页面加载后立即运行。我想做的是弄清楚当元素出现时如何让它运行？这是我当前的标记

编辑

使用航路点获得了预期的效果。更新了下面的 jQuery

   $('#counter').waypoint(function (direction) {
    $('.count').each(function () {
      var $this = $(this);
      jQuery({
        Counter: 0
      }).animate({
        Counter: $this.text()
      }, {
        duration: 2000,
        easing: 'swing',
        step: function () {
          $this.text(Math.ceil(this.Counter));
        }
      });
    });
  }, {
    offset: '80%'
  });

 #counter {
      position: relative;
      color: #fff;
      margin-top: 600px;
    }
    
    .counters {
      padding: 100px 0;
      width: 33.333%;
      float: left;
    }
    
    #counter-1 {
      background: #393939;
    }
    
    #counter-2 {
      background: #494949;
    }
    
    #counter-3 {
      background: #595959;
    }
    
    .line-numbers {
      text-align: center;
      display: block;
      font-size: 55px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="counter">
        <div id="counter-1" class="counters">
          <span class="line-numbers count">2000</span>
        </div>
        <div id="counter-2" class="counters">
          <span class="line-numbers count">2500</span>
        </div>
        <div id="counter-3" class="counters">
          <span class="line-numbers count">150</span>
        </div>
      </section>

Answer 1

你可以使用这个函数

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

如 this answer 所示