滚动动画进度条

时间:2012-11-08 21:38:14

标签: jquery css scroll

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

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

这是我到目前为止的Javascript:

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

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

1 个答案:

答案 0 :(得分:1)

怎么样?

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

基本上我所做的只是在width:100%;

类的div中添加position:fixed;meter

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

<强>更新

你可以使用像inview插件这样的东西。这是downloaddemo is here。将它包装在您自己的进度条脚本中,并且在视图之前不会开始动画。