页面上的多个倒数计时器

Question

我创建了一个页面，其中添加了多个倒数计时器。 但是我希望它们仅在用户位于特定部分时才起作用，例如在添加了页面点导航的特定部分中，单击时用户使用滚动效果从该部分中被带到该部分，因此在每个部分中都有一个倒数计时器，但是仅工作一次并且每个部分的值都会更新，如何使倒数计时器仅在用户位于该特定部分时才起作用。

这是脚本

var a = 0;   
$(window).scroll(function() {

  var oTop = $('#counter{{loop.index}}').offset().top - window.innerHeight;
 
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {

          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }

        });
    });
    a = 1;
  }

});

这是动态的，但如果我每个部分都有不同的脚本，那么它也可以正常工作

var oTop = $('#counter{{loop.index}}').offset().top - window.innerHeight;

对于本节每个部分的高度都相同，我从 alert($("#counter4").height());

从 this.height() function

Answer 1

你可以从这个例子中得到一个想法，它也有多个倒数计时器和滚动https://www.cssscript.com/demo/scroll-triggered-counter/