在滚动页面时统计数字

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>

- elina

---

为什么不在窗口滚动事件中使用元素的offsetTop属性呢？我认为那会是最简单的方法。 - Sheelpriy

你能举个例子吗？ - elina

我猜Mahmoud已经给了你一个在Windows上可行的解决方案。 - Sheelpriy

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>

- Mahmoud

---

我的意思是每次我滚动到数字时，我想重新计数。但这并没有发生。 - elina

欢迎，您能标记答案为正确吗？这将有助于其他遇到相同问题的人。 - Mahmoud