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

第一步

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

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

第二步

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

First当我向下滚动到该特定div时，计数器首先显示我的最终值（例如75）

秒然后它从0开始，计数器从不停止。它的数量达到成千上万，但从未停止过

这是我的密码：

HTML

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

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

我想要什么

所以我希望当站点向下滚动到特定的div时，计数器从0开始，并在其结束值上停止但是当我向上或向下滚动时，计数器不应该再次启动，并且仍然在结束值处停止

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

---

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

也许值得一看以下两个js插件：

---

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

只需使用

.data

之类的

.data（'counted'，true）

向

div添加一个标志即可


$（窗口）。滚动（函数（）{
var hT=$（'.love_counter'）.offset（）.top，
hH=$（'.love_counter'）.outerHeight（），
wH=$（窗口）.height（），
wS=$（this.scrollTop（）；
如果（wS>（hT+hH-wH））{
$（“.love_count”）。每个（函数（）{
var elm=$（本）；
如果（！elm.data（'counted'））{
elm.data（'count'，parseInt（$（this.html（），10））；
html（'0'）；
伯爵（榆树）；
}
});
}
});
函数计数（$this）{
var current=parseInt（$this.html（），10）；
$this.html（++当前+'%'）；
如果（当前！=$this.data（'count'））{
setTimeout（函数（）{count（$this）}，15）；
}
否则{
$this.data（'counted'，true）；
}
}
.top\u div{
背景色：红色；
高度：650px；
}
1.爱情{
字体大小：75px；
颜色：#3D7CB1；
边缘底部：25px；
字体大小：300；
}

顶球
75%
30%
以下是完整的工作代码：

<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>


.div{背景：#ccc；高度：1200px；}
75
$（窗口）。滚动（开始计数器）；
函数startCounter（）{
var hT=$（'.Count'）.offset（）.top，
hH=$（'.Count'）.outerHeight（），
wH=$（窗口）.height（）；
如果（$（窗口）.scrollTop（）>hT+hH wH）{
$（窗口）.off（“滚动”，startCounter）；
$（'.Count'）。每个（函数（）{
var$this=$（this）；
jQuery（{Counter:0}）.animate（{Counter:$this.text（）}{
期限：2000年，
放松:"摇摆",，
步骤：函数（）{
$this.text（Math.ceil（this.Counter）+'%'）；
}
});
});
}
}
我想你不明白我的问题。。。或者仔细阅读，我理解你的问题，但我没有试图修复你的代码，而是建议，因为你在jQuery方面很弱，你可以使用scrollmagic插件轻松实现你想要做的事情。我提出这个作为替代方案。演示只展示了一些您可以做的事情。您检查了小提琴吗？我错过了片段中的jquery引用。现在呢？