Javascript 滚动动画技能栏上的图标为'；行不通

我正在处理我的投资组合，我被困在动画技能栏里。我正在使用JQuery，我已经学习了不同的教程，但没有一个不适用于我的项目。我已经计算了部分滚动位置和窗口滚动位置。我更改了父div和子div，但结果相同。这是我的密码

$（文档）.ready（函数（）{
var skillBar=$（'.skill body'）；
$（窗口）。滚动（函数（）{
var SkillLocation=$（“#教育技能”）.offset（）.top；
var scrollLocation=$（this.scrollTop（）；
skillBar.each（函数（）{
if（技能定位）
您只需稍微减少
skillPosition
变量，以便它在屏幕上出现时启动动画。对于本例，我刚刚使用了
-100
，但您可以根据需要对其进行定制：


$（文档）.ready（函数（）{
var skillBar=$（'.skill body'）；
$（窗口）。滚动（函数（）{
var SkillLocation=$（“#教育技能”）.offset（）.top；
var scrollLocation=$（this.scrollTop（）；
skillBar.each（函数（）{
如果（技能位置-100
不要使用
scroll
event listener进行此类操作，这对浏览器性能有害

您应该使用Intersection Observer（IO）来实现这一点，这是为此类问题而设计的。有了IO，您可以在HTML元素与另一个元素（或视口）相交时做出反应

，它向您展示了如何在元素进入视口后设置其动画（一直向下滚动）

简要回顾一下您必须做的事情：

首先，您必须创建一个新的观察者：

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

在这里，我们定义一旦目标元素在视口中100%可见（阈值为1），回调函数就会执行。在这里，您可以定义另一个百分比，0.5表示一旦元素50%可见，函数就会执行

然后您必须定义要监视的元素，在您的情况下，这将是
计数器
元素：

var target = document.querySelector('.counter');
observer.observe(target);

最后，您需要通过定义回调函数来指定元素在视口中可见后应发生的情况：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // here you animate the skill bar
  });
};

如果需要支持较旧的浏览器，请使用

如果您不想在第二次将元素滚动到视图中时再次触发动画，则在动画完成后立即触发。
您到底想实现什么？进度条对我有效，但仅在我滚动一次之后。您希望它们仅在达到某个滚动位置时才开始填充？实际上，我的目标是嗯，我向下滚动到我的skillbar div区域，然后它将开始动画。