在滚动条上启动计数器

时间:2016-05-12 13:05:20

标签: javascript jquery scroll counter

我在JQuery上使用了两个函数。

第一个是计数器(View here),第二个用于在Div位于窗口中心时启动计数器。

计数器

JS:

$('.counter').each(function() {
    var $this = $(this),
      countTo = $this.attr('data-count');

    $({
      countNum: $this.text()
    }).animate({
        countNum: countTo
      },

      {

        duration: 3000,
        easing: 'linear',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
        }

      });

});

HTML:

<div class="counter" data-count="10000">0</div>

https://jsfiddle.net/a52e24Ls/

*

*

滚动检测

JS:

$(window).scroll(function() {
      startCounter();
    });

$(window).load(function(){
      startCounter();
    });

function startCounter(){

      $('.contributorTitle').each(function(i) {

        var bottom_of_object = $(this).position().top + ($(this).outerHeight()/2);
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if (bottom_of_object < bottom_of_window){

        }

      });
  } 

我想,我把JS计数器放在

if (bottom_of_object < bottom_of_window){

        }

但它不起作用。我希望计数器开始,窗口是中心。

0 个答案:

没有答案