div滚动

Question

我一直在尝试编写一个 count-up ，当屏幕上显示特定div时会触发该 计数 。

我一直在从论坛到论坛，但我用的所有例子似乎都不适合我。

如果在div可见的情况下刷新页面，似乎只能正确触发它，否则 count-up 似乎无法激活

有人可以帮忙吗？提前谢谢大家。

HTML：

<section id="facts_section" style="background:#fff;">
  <h1 class="main-title">fun facts about us</h1>
  <div class="row">
    <div class="columns large-3 medium-3">
      <h2 class="count">8</h2>
    </div>

    <div class="columns large-3 medium-3">
      <h2 class="count">15</h2>
    </div>

    <div class="columns large-3 medium-3">
      <h2 class="count">80</h2><span class="percent">&#37;</span>
    </div>

    <div class="columns large-3 medium-3">
      <h2 class="count">5</h2>
    </div>
  </div>
</section>

jQuery的：

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