javascript - 滚动 Div 部分的动画计数器？

Question

我在我的网站上创建了一个计数器部分，该部分在页面加载时进行动画处理，但是我试图在用户到达该部分时触发动画。

目前我有这个，但是动画只在 div 超出导航时触发，即:屏幕顶部包括导航。我将如何更改它以便动画在 div 变得可见时触发？

我还有一个问题，它显示以没有逗号的完整数字开头，然后转到 0 并设置动画，我怎样才能让它以 0 开头？

我是 JS 的新手，所以非常感谢对此的任何解释。

这是我所拥有的:

const convert = str => {
  // Find the number
  let regx = /(\d{1,3})(\d{3}(?:,|$))/;
  // Set a variable
  let currStr;
  // Start loop
  do {
    // Replace current string, split it
    currStr = (currStr || str.split(`.`)[0])
      .replace(regx, `$1,$2`)
  } while (currStr.match(regx)); // Loop

  // Return our result from function
  return (str.split(`.`)[1]) ?
    currStr.concat(`.`, str.split(`.`)[1]) :
    currStr;
};

$(window).scroll(startCounter);

function startCounter() {
  if ($(window).scrollTop() > $('#counter').offset().top) {
    $(window).off("scroll", startCounter);
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 2000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
          $(this).text(convert($(this).text()))
        }
      });
    });
  }
}

.section-counter {
  margin-top: 150vh;
  margin-bottom: 150vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-counter" id="counter">

  <div class="row">
    <h2>Headline Data Figures</h2>
  </div>

  <div class="row">
    <div class="col span-1-of-2">
      <div class="row">
        <div id="shiva"><span class="count">1688019</span>
          <h3>Contributions</h3>
        </div>
      </div>

      <div id="shiva"><span class="count">82150</span>
        <h3>Items of Business</h3>
      </div>

    </div>

    <div class="col span-1-of-2">
      <div class="row">
        <div id="shiva"><span class="count">10505</span>
          <h3>Meetings</h3>
        </div>
      </div>

      <div id="shiva"><span class="count">168260</span>
        <h3>Written&#47;Oral Questions</h3>
      </div>
    </div>
  </div>

  <div class="row arrow-dark arrow__7 animated pulse infinite">
    <i class="ion-md-arrow-dropdown"></i>
  </div>

</section>

Answer 1

如果我理解正确的话，问题是你在比较 div 的偏移量到屏幕的 top，而实际上你想找出屏幕底部的位置是，并将其与 div 的位置进行比较。

关于从 0 开始，您可以让元素使用 data attribute确定最大值而不是文本，这样您就可以让元素读取 0 直到它们开始计数:

const convert = str => {
  // Find the number
  let regx = /(\d{1,3})(\d{3}(?:,|$))/;
  // Set a variable
  let currStr;
  // Start loop
  do {
    // Replace current string, split it
    currStr = (currStr || str.split(`.`)[0])
      .replace(regx, `$1,$2`)
  } while (currStr.match(regx)); // Loop

  // Return our result from function
  return (str.split(`.`)[1]) ?
    currStr.concat(`.`, str.split(`.`)[1]) :
    currStr;
};

$(window).scroll(startCounter);

function startCounter() {
  var bottomOfScreen = $(window).scrollTop() + $(window).innerHeight();
  if (bottomOfScreen > $('#counter').offset().top) {
    $(window).off("scroll", startCounter);
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).attr('data-max')
      }, {
        duration: 2000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
          $(this).text(convert($(this).text()))
        }
      });
    });
  }
}

.section-counter {
  margin-top: 150vh;
  margin-bottom: 150vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-counter" id="counter">

  <div class="row">
    <h2>Headline Data Figures</h2>
  </div>

  <div class="row">
    <div class="col span-1-of-2">
      <div class="row">
        <div id="shiva"><span class="count" data-max="1688019">0</span>
          <h3>Contributions</h3>
        </div>
      </div>

      <div id="shiva"><span class="count" data-max="812150">0</span>
        <h3>Items of Business</h3>
      </div>

    </div>

    <div class="col span-1-of-2">
      <div class="row">
        <div id="shiva"><span class="count" data-max="10505">0</span>
          <h3>Meetings</h3>
        </div>
      </div>

      <div id="shiva"><span class="count" data-max="168260">0</span>
        <h3>Written&#47;Oral Questions</h3>
      </div>
    </div>
  </div>

  <div class="row arrow-dark arrow__7 animated pulse infinite">
    <i class="ion-md-arrow-dropdown"></i>
  </div>

</section>