在卷轴上运行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上所示