当有人滚动到ID时，使用JQuery启动动画数字计数器

当您滚动到特定的父id（如

#counter container

）时，是否有人知道如何启动数字计数器动画

$（窗口）。滚动（开始计数器）；
函数startCounter（）{
如果（$（窗口）.scrollTop（）>200）{
$（窗口）.off（“滚动”，startCounter）；
$（'.count'）。每个（函数（）{
var$this=$（this）；
jQuery({
柜台:0
}).制作动画({
计数器：$this.text（）.replace（/，/g'，）
}, {
持续时间：1000，
放松:"摇摆",，
步骤：函数（）{
$this.text（commaSeparateNumber（Math.floor（this.Counter））；
},
完成：函数（）{
$this.text（commaSeparateNumber（this.Counter））；
//警报（“完成”）；
}
});
});
函数commaSeparateNumber（val）{
while（/（\d+）（\d{3}）/.test（val.toString（））{
val=val.toString（）；
}
返回val；
}
}
}

#计数器容器{
利润上限：1000px；
}

向下滚动。。。
6,000
600
60

要确定滚动是否超过某个元素，可以将窗口滚动位置+高度与目标元素的垂直偏移进行比较。试试这个：

$（窗口）。滚动（开始计数器）；
函数startCounter（）{
设scrollY=（window.pageYOffset | | document.documentElement.scrollTop）+window.innerHeight；
让divPos=document.querySelector（“#计数器容器”）.offsetop；
如果（滚动>divPos）{
$（窗口）.off（“滚动”，startCounter）；
$（'.count'）。每个（函数（）{
var$this=$（this）；
jQuery({
柜台:0
}).制作动画({
计数器：$this.text（）.replace（/，/g'，）
}, {
持续时间：1000，
放松:"摇摆",，
步骤：函数（）{
$this.text（commaSeparateNumber（Math.floor（this.Counter））；
},
完成：函数（）{
$this.text（commaSeparateNumber（this.Counter））；
//警报（“完成”）；
}
});
});
函数commaSeparateNumber（num）{
返回num.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”；
}
}
}

#垫片{
高度：1000px；
}

向下滚动。。。
6,000
600
60

谢谢。这只是在我正在实现的负载上工作。页边空白可能会干扰它吗？它在Chrome中工作，但可能会导致其他浏览器出现问题。我更新了示例，使用不同的方法强制页面内容滚动。