javascript - 滚动到特定元素时触发事件，然后使用 jquery 停止它

Question

First Step

我想制作一个计数器，当用户加载我的页面时，计数器从 0 开始并以其最终值(例如 75)结束。所以我从网上搜索并找到一个 jQuery 代码，我复制该代码并将其粘贴到我的 js 文件 custom.js 中，并根据需要进行了一些更改。它运行完美。

这是我的代码:

HTML

<div class="top_div">
  Top Div
</div>
<div class="love_count">75%</div>
<div class="love_count">30%</div>

JS

jQuery(document).ready(function ($) {
function count($this){
  var current = parseInt($this.html(), 10);
  $this.html(++current + '%');
  if(current !== $this.data('count')){
    setTimeout(function(){count($this)}, 15);
  }
}

$(".love_count").each(function() {
  $(this).data('count', parseInt($(this).html(), 10));
  $(this).html('0');
  count($(this));
});
});

Demo

Second Step

现在我的客户希望当用户向下滚动到这个特定的 div 时计数器开始。所以我再次从网上搜索并找到了一些其他代码。但它不起作用。

1. 首先 当我向下滚动到那个特定的 div 时，计数器首先显示我的最终值(例如 75)
2. 第二 然后它从 0 开始，计数器永远不会停止。数以千计、数以百万计，但从未停止。

这是我的代码:

HTML

<div class="top_div">
  Top Div
</div>
<div class="love_counter">
  <div class="love_count">75%</div>
  <div class="love_count">30%</div>
</div>

JS

$(window).scroll(function() {
    var hT = $('.love_counter').offset().top,
        hH = $('.love_counter').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH)){
        function count($this){
            var current = parseInt($this.html(), 10);
            $this.html(++current + '%');
            if(current !== $this.data('count')){
                setTimeout(function(){count($this)}, 15);
            }
        }

        $(".love_count").each(function() {
            $(this).data('count', parseInt($(this).html(), 10));
            $(this).html('0');
            count($(this));
        });
    }
});

Demo

What I want

所以我希望当网站向下滚动到那个特定的 div 时，计数器从 0 开始并停在它的结束值上。 但是当我向上或向下滚动时，计数器不应该重新开始并且仍然停在那里结束值。

但是当用户刷新页面并向下滚动到那个特定的 div 时，计数器会像往常一样开始并停止到那里的结束值，并且当我向上或向下滚动时不会再次开始。

我在 jQuery 方面很弱所以请帮助我并指导我。我希望你能理解我的问题。

Answer 1

这是完整的工作代码:

<style>
.div{background:#ccc;height:1200px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="Count">75</div>
<script>
$(window).scroll(startCounter);
function startCounter() {
var hT = $('.Count').offset().top,
      hH = $('.Count').outerHeight(),
      wH = $(window).height();
    if ($(window).scrollTop() > hT+hH-wH) {
        $(window).off("scroll", startCounter);
        $('.Count').each(function () {
            var $this = $(this);
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 2000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter) + '%');
                }
            });
        });
    }
}
</script>