Javascript 滚动上的CSS技能栏动画

我想做点什么。我使用的代码来自，但答案从来没有完全清楚。他们建议使用，但我还没能让它工作。我将使用第一个示例的代码，只是，我使用基础4，进度条是伴随它而来的，并且更容易创建。另外，第二个示例中提供的动画代码要干净得多——总的来说，第一个示例有点凌乱、代码繁重和冗余

我的代码是活的。我正在使用“关于”部分中的技能栏。在用户到达这一点之前，动画应该暂停。一旦用户滚动到页面的这一部分，动画就会播放

编辑：此外，如果你有任何建议，阻止酒吧“打破”他们的容器，当你缩放页面（这个网站是为了响应），我也会很感激

---

EDIT2：我注意到，当我玩这个游戏时，溢出：隐藏；继续。进步解决了我的“突破性”问题。。但是，当您调整窗口大小时，大小保持在初始化时的大小。我知道，实际上，访问我的网站的用户可能不会对窗口进行太大的调整，但对于查看它的雇主来说，如果它不能正常工作，它将有点跛脚。我有同样的问题，暴躁的猫按钮覆盖，它初始化在第一个大小，并没有调整覆盖之后。对此的建议将非常非常感谢

如果你知道你的技能栏在哪里，你知道你的屏幕在哪里，你只需要javascript。（没有插件或奇怪的东西）

要获得屏幕的垂直位置，很简单：

 window.pageYOffset

要获得div的垂直位置，只需

 div.offsetTop

在您的情况下，我会给包装所有技能条的div一个id，并设置一个循环（window.requestAnimationFrame），以检查您是否在div的范围内（比如，如果窗口偏移和div之间的差值小于某个值）

如果答案为“是”，则触发动画

制作动画的最佳方法是css转换。（如果你需要一个好的css动画介绍，这里有一个我觉得很有用的视频：）

您可以从javascript设置css动画

其想法是将所有“米”宽度设置为0。然后在javascript中执行以下操作：

 div.style.transition = "width 1s";
 div.style.width = someValue;

我建议在div中包含的值是“progress”div的某个常数部分，如在中，与em或px相对的是%。这项技术应该有效。（如果仍然存在问题，则会有一个window.requestAnimationFrame循环，这样您可以在每个时间步重新计算值…尽管…请注意性能）

推荐您使用jQuery的原因是，当您需要更新所有div以设置它们的动画时，只需编写$（this）.find（'.meter'），然后addClass（'.expand'）就容易多了

---

希望这有助于人力资源管理。。。谢谢你的帮助，但我还没完全弄明白。如果你有更多的信息，请按我的方式发送。