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);
    }
 });
});

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

Answer 2

感谢代码，但这不是我所看到的;我通过添加插件INVIEW JQUERY和以下脚本解决了这个问题，无论如何，谢谢

CODEPEN DEMO

$('#counter').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
    if (visible) {
        $(this).find('.count').each(function () {
            var $this = $(this);
            $({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 2000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
        $(this).unbind('inview');
    }
});

滚动到div停止计数的JS计数器

2 个答案: