Javascript 在滚动经过Div部分时设置计数器动画？

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

目前我有这个，但是动画只在div超出导航时触发，即：屏幕顶部包括导航。如何更改此设置，以便在div变为可见时触发动画

我也有一个问题，它显示开始为完整的数字，没有逗号，然后去0和动画，我怎么能让它显示一个0开始

我对JS还很陌生，所以如果您能解释一下，我将不胜感激

以下是我所拥有的：

const convert=str=>{
//找到号码
设regx=/（\d{1,3}）（\d{3}（？：，|$）/；
//设置一个变量
让柯尔斯特；
//起动回路
做{
//替换当前字符串，拆分它
currStr=（currStr | | str.split（`.`）[0]）
.replace（regx，`1，`2`）
}while（currStr.match（regx））；//循环
//从函数返回我们的结果
返回（str.split（`.`）[1]）？
currStr.concat（`.`，str.split（`.`）[1]）：
currStr；
};
$（窗口）。滚动（开始计数器）；
函数startCounter（）{
if（$（窗口）.scrollTop（）>$（'#计数器'）.offset（）.top）{
$（窗口）.off（“滚动”，startCounter）；
$（'.count'）。每个（函数（）{
$（this.prop（'Counter'，0）。设置动画({
计数器：$（this.text（））
}, {
期限：2000年，
放松:"摇摆",，
步骤：功能（现在）{
$（this.text（Math.ceil（now））；
$（this.text）（转换（$（this.text（）））
}
});
});
}
}

。区段计数器{
边际上限：150vh；
边缘底部：150vh；
}

标题数据数字
1688019
贡献
82150
业务项目
10505
会议
168260
书面/；口头问题

我将为您提供在用户到达某个元素后启动动画的逻辑

相关的事件触发器是ONMOUSEOVER，因此要合并它

 <div id="abc" onmouseover="AnimateIt();"></div>

因此，动画的JavaScript逻辑

 function AnimateIt(){ abc.style.animationPlayState='running'; }

---

就是这样。

如果我理解正确，问题是您正在比较div的偏移量和屏幕顶部，而实际上您希望找到屏幕底部的位置，并将其与div的位置进行比较

关于从

0

开始，您可以让元素使用a来确定最大值，而不是文本，这样您可以让元素读取

0

，直到开始计数：

const convert=str=>{
//找到号码
设regx=/（\d{1,3}）（\d{3}（？：，|$）/；
//设置一个变量
让柯尔斯特；
//起动回路
做{
//替换当前字符串，拆分它
currStr=（currStr | | str.split（`.`）[0]）
.replace（regx，`1，`2`）
}while（currStr.match（regx））；//循环
//从函数返回我们的结果
返回（str.split（`.`）[1]）？
currStr.concat（`.`，str.split（`.`）[1]）：
currStr；
};
$（窗口）。滚动（开始计数器）；
函数startCounter（）{
var bottomOfScreen=$（窗口）.scrollTop（）+$（窗口）.innerHeight（）；
如果（屏幕底部>$（“#计数器”）.offset（）.top）{
$（窗口）.off（“滚动”，startCounter）；
$（'.count'）。每个（函数（）{
$（this.prop（'Counter'，0）。设置动画({
计数器：$（this.attr（'data-max'））
}, {
期限：2000年，
放松:"摇摆",，
步骤：功能（现在）{
$（this.text（Math.ceil（now））；
$（this.text）（转换（$（this.text（）））
}
});
});
}
}

。区段计数器{
边际上限：150vh；
边缘底部：150vh；
}

标题数据数字
0
贡献
0
业务项目
0
会议
0
书面/；口头问题

谢谢，不过我不是在找鼠标悬停触发器。我已经让scrollTop工作了，但是我希望在它到达屏幕顶部之前触发它。类似这样：你说“当用户到达该部分时，我正试图触发动画”，这正是我给你的。我添加了top-$（'nav'）.height（），这似乎实现了我想要的更多。然而，计数器仍然不是从0开始。对不起，我不做第三方$。。。我只做javascript。谢谢，祝你好运。我不确定这是如何回答最初的问题的。你的动画似乎没有任何作用，简单地设置动画播放状态不会导致文本向上计数。这很好，它开始得有点太快了。但是，你能指导我在哪里对此进行更改吗？事实上，这没关系，我已经解决了这一部分，谢谢！

 function AnimateIt(){ abc.style.animationPlayState='running'; }