在滚动上运行jQuery数字计数器

时间:2017-05-09 14:16:30

标签: jquery html css

我有一个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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分: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上显示