当滚动到特定元素时，使用jQuery触发事件并停止它。

Question

第一步

我想制作一个计数器，当用户加载我的页面时，计数器从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));
});
});

演示

第二步

现在我的客户想要当用户滚动到特定的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));
        });
    }
});

演示

我的要求

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

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

我在jQuery方面非常薄弱，请帮助我并指导我。我希望您理解我的问题。

- deemi-D-nadeem

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>

- Ahmed

Answer 2

只需在 div 中添加一个标记，使用 .data，例如 .data('counted', true)。

$(window).scroll(function() {
  var hT = $('.love_counter').offset().top,
      hH = $('.love_counter').outerHeight(),
      wH = $(window).height(),
      wS = $(this).scrollTop();
  if (wS > (hT+hH-wH)){
    $(".love_count").each(function() {
      var elm = $(this);
      if (!elm.data('counted')) {
        elm.data('count', parseInt($(this).html(), 10));
        elm.html('0');
        count(elm);
      }
    });
  }
});

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

.top_div {
  background-color: red;
  height: 650px;
}
.love_count {
  font-size: 75px;
  color: #3D7CB1;
  margin-bottom: 25px;
  font-weight: 300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top_div">
  Top Div
</div>
<div class="love_counter">
  <div class="love_count">75%</div>
  <div class="love_count">30%</div>
</div>

https://jsfiddle.net/5gxw16kd/9/

- Mosh Feu

---

你有检查过这个代码片段吗？ - Mosh Feu

我在代码片段中错过了jquery的引用。现在怎么样？ - Mosh Feu

Answer 3

也许看一下以下两个JS插件会很有价值：

http://scrollmagic.io/

http://prinzhorn.github.io/skrollr/

它们都允许您在滚动时添加交互。

- Vasilis Tsirimokos

---

我认为你可能无法理解我的问题...或者没有仔细阅读它。 - deemi-D-nadeem

我理解了你的问题，但是我提出了一个建议，不是试图修复你的代码。因为你在jQuery方面比较薄弱，所以你可以使用scrollmagic插件轻松实现你想要做的事情。我提供这个作为一种替代方案。演示只展示了你可以做的一些事情。 - Vasilis Tsirimokos