javascript - 滚动到div时JS计数器停止计数

我想在javascript上建立一个计数器，当您转到某个div时，开始计数，当达到指定数字时它将停止，如果我继续滚动，该计数器将不再继续计数

我已经想到了用钢笔，但是当我继续滚动计数器时，不要停下来，而是开始倒数，然后在达到低数时停下来。

有什么想法可以使这项工作吗？

提前致谢。

的HTML

<!-- Counter section -->
<div id="counter" class="Wrapper-counter">
  <!-- Counter_item -->
  <div class="Counter_item">
    <h3 class="Counter_h3 right">
      <span class="count">
        123
      </span>
    </h3>
    <p class="Counter_paragraph right">
      <strong>Lorem ipsum</strong>
    </p>
  </div>
  <!-- /Counter_item -->

  <!-- Counter_item -->
  <div class="Counter_item">
    <h3 class="Counter_h3 left">
      <span class="count">
        123
      </span>
    </h3>
    <p class="Counter_paragraph left">
      <strong>Lorem ipsum</strong>
    </p>
  </div>
  <!-- /Counter_item -->
</div>
<!-- /Counter section -->

JS

$(window).on('scroll', function() {

  var div_counter = window.pageYOffset;
  var scroll_pos_test = $('#counter').offset().top - window.innerHeight; // set to whatever you want it to be

  if(div_counter < scroll_pos_test) {
        //do stuff
      $('.count').each(function () {
        $(this).prop('Counter',0).animate({
          Counter: $(this).text()
        }, {
          duration: 3000,
          easing: 'swing',
          step: function (now) {
            $(this).text(Math.ceil(now));
          }
        });
      });
    }
});

codepen here

最佳答案

我不理解您的代码，但是我创建了一个示例，您正在寻找的示例可能为您提供一种以更简单的方式解决此问题的新视角。在CODEPEN上查看工作示例。

的HTML

<div class="container">
   <p data-counter="100">100</p>
</div>

的CSS

p {
  font-size: 3em;
  position: fixed;
  color: blue;
}

.container {
  position: relative;
  height: 700px;
  background: #ccc;
}

JS

$(document).ready(function() {
  var topCount = 100;
  var maxCount = 50;
  var startCount = 200;
  var endCount = 400;
  var currCount = 0;

  $(window).scroll(function() {

    if (($(window).scrollTop() >= startCount) && ($(window).scrollTop() <= endCount)) {

      currCount = Math.floor(maxCount + (maxCount - topCount) * ($(window).scrollTop() - endCount) / (endCount - startCount));

     $("p").attr("data-counter",currCount).text(currCount);
    }
 });
});

它应该很简单。我没有重置机制，因为我不知道您想怎么做或根本不想拥有它。但是很容易添加任何修改

关于javascript - 滚动到div时JS计数器停止计数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35345192/