滚动计数

Question

如果我回滚到数字，如何重新开始计数？我有一个计数数字。我还要向下滚动页面，然后再次回到页面上。我想再次从零开始计数，这可能吗？

function count($this) {
  var current = parseInt($this.html(), 10);
  current = current + 1;
  $this.html(++current);
  if (current > $this.data('count')) {
    $this.html($this.data('count'));
  } else {
    setTimeout(function() {
      count($this)
    }, 1);
  }
}

$(".stat-count").each(function() {
  $(this).data('count', parseInt($(this).html(), 10));
  $(this).html('0');
  count($(this));
});

#counter {
  margin-bottom: 90%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="statscounts" id="counter">
  <div class="statwrap">
    <span class="stat-count ">400</span>
    <small>number 1</small>
  </div>
  <div class="statwrap">
    <span class="stat-count">105</span>
    <small>number 2</small>
  </div>
  <div class="statwrap">
    <span class="stat-count">321</span>
    <small>number 3</small>
  </div>
</div>

Answer 1

您可以使用jQuery检测滚动位置。到达零位置后，您将重新运行允许计数器的脚本。最好在滚动到零位置时通过调用每个函数来放置它们。

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();

    if(scroll == 0)
     setTimeout(function(){reInitCount();},500);
});

function reInitCount(){
  $(".stat-count").each(function() {
    $(this).html('0');
    count($(this));
  });
}

function reInitCount(){
  $(".stat-count").each(function() {
    $(this).html('0');
    count($(this));
  });
}

function count($this) {
  var current = parseInt($this.html(), 10);
  current = current + 1;
  $this.html(++current);
  if (current > $this.data('count')) {
    $this.html($this.data('count'));
  } else {
    setTimeout(function() {
      count($this)
    }, 1);
  }
}

reInitCount();


$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
      if(scroll == 0)
         setTimeout(function(){reInitCount();},500);
      
         
});

#counter {
  margin-bottom: 90%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="statscounts" id="counter">
  <div class="statwrap">
    <!-- it's better to initialize your data-count on the HTML side -->
    <span class="stat-count" data-count="400">0</span>
    <small>number 1</small>
  </div>
  <div class="statwrap">
    <span class="stat-count" data-count="105">0</span>
    <small>number 2</small>
  </div>
  <div class="statwrap">
    <span class="stat-count" data-count="321">0</span>
    <small>number 3</small>
  </div>
</div>
<p>
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   ......<br />
   
</p>