我想做这样的事情。我在这里使用此答案中的代码，但答案从未完全清楚。建议他们在这里使用这个 jquery 插件，但我无法让它工作。我会使用第一个示例的代码，只是，我使用的是 Foundation 4，进度条是它附带的，并且更易于创建。此外，第二个示例中提供的动画代码更简洁——总体而言，第一个示例有点混乱、代码繁重且冗余。
我的代码在这里。我正在使用关于部分的技能栏。在用户到达这一点之前，动画应该暂停。一旦用户滚动到页面的这一部分，动画就会播放。
编辑：另外，如果您有任何建议可以在您缩放页面时阻止条“打破”其容器（此站点旨在响应），我也将不胜感激。
EDIT2：我注意到我一直在玩这个溢出：隐藏；on .progress 修复了我的“破坏性”问题。但是，当您调整窗口大小时，大小保持在它们初始化的位置。实际上，我知道访问我网站的用户可能不会大量调整窗口大小，但对于查看它的雇主来说，如果它不能正常工作，它会有点蹩脚。我在 grumpy-cat 按钮叠加层中遇到了同样的问题，它以第一个大小初始化，之后不会调整叠加层的大小。对此的建议将非常非常感谢！
如果你知道你的技能栏在哪里并且你知道你的屏幕在哪里，你只需要 javascript。（没有插件或奇怪的东西）
要获得屏幕的垂直位置，很简单：
window.pageYOffset
要获得 div 的垂直位置，您只需要
div.offsetTop
在你的情况下，我会给包含所有技能栏的 div 一个 id 并设置一个循环（window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame）检查您是否在 div 的范围内（例如，如果窗口偏移量和 div 之间的差异小于某个数量）。
如果答案是肯定的，则触发动画。
制作动画的最佳方式是通过 css 过渡。（如果你需要一个很好的 CSS 动画介绍，这里有一个我觉得很有帮助的视频：http ://www.youtube.com/watch?v=VoncDvOfUkk ）
您可以从 javascript 设置 css 动画。
这个想法是您将所有“米”宽度设置为 0。然后在 javascript 中执行以下操作：
div.style.transition = "width 1s";
div.style.width = someValue;
我对包含在 div 中的值的建议是“进度” div 的某个恒定分数，如 % 而不是 em 或 px。这种技术应该有效。（如果你仍然有问题，你有一个 window.requestAnimationFrame 循环，所以你可以在每个时间步重新计算值......虽然......注意性能）。
推荐您使用 jQuery 的原因是因为当您必须更新所有 div 以便为它们设置动画时，只需编写 $(this).find('.meter') 然后 addClass('.expand') 是容易多了。
希望这可以帮助