Question

我想要一个只在屏幕上显示时才激活的计数器。我已经设法从我发现的其他例子中将这一点混合在一起。

HTML：

<div>Scroll Down</div>
<span class="count">200</span>

CSS：

div {
   height:800px;
   background:red;
}
h1 {
   display:none;
}

使用Javascript：

$(window).scroll(function() {
    var hT = $('#scroll-to').offset().top,
        hH = $('#scroll-to').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    console.log((hT - wH), wS);
    if (wS > (hT + hH - wH)) {
        $('.count').each(function() {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 4000,
                easing: 'swing',
                step: function(now) {
                    $(this).text(Math.ceil(now));
                }
            });
        });
    }
});

样本：

https://jsfiddle.net/76d57vjL/

问题是，它达到200，然后重新计算到0，但我希望它只能保持在200.我似乎无法弄清楚它实际上是什么造成的。

Answer 1

问题在于你创造了超过1个动画，所以在开始计数后回到1，我用一个标志修复它，但是你可能会用高度做一些东西来检查它。

这里有标志的修复：https://jsfiddle.net/uc0av8fh/

var flag = true;
$(window).scroll(function() {
$('#scroll-to');
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    $('.count').each(function () {
      if(!flag) return;
      //console.log();
      flag = false;
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 4000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now));
              return 1;
          }
      });
    });
   }
});

为什么在达到目标后会倒计时？

1 个答案: