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

Question

我想在 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

Answer 1

我不理解你的代码，但我创建了一个你正在寻找的例子，它可能会给你一个新的视角，让你了解如何以更简单的方式解决这个问题。查看 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);
    }
 });
});

它应该非常简单。我没有重置机制，因为我不知道你想怎么做或者你是否想要它。但很容易添加任何修改