滚动动画进度条

我有一个进度条，当页面加载时动画，但我希望它在用户向下滚动时动画，因为它将在页面中间。 现在，如果页面加载，则用户看不到动画。

基本上，动画应该暂停，直到用户向下滚动到某个点，一旦条形图在视图中，动画就会开始。

这是我到目前为止的Javascript：

$(function() { $(".meter > span").each(function() { $(this) .data("origWidth", $(this).width()) .width(0) .animate({ width: $(this).data("origWidth") }, 1200); }); });​ 

这是一个更详细的jsfiddle： http ： //jsfiddle.net/YAZJb/

Answer 1

这个怎么样？

我更新了你的jsFiddle http://jsfiddle.net/YAZJb/1/

基本上我所做的就是增加一个width:100%; 和position:fixed; 用class级meter到你的div

那当然，如果我理解你的问题了吗？ 即使用户滚动，您希望进度条保持在视图中吗？

更新：

你可以使用像inview插件这样的东西。 这是下载和演示在这里 。 将它包装在您自己的进度条脚本中，并且在视图之前不会开始动画。