動畫滾動的進度條

Question

我有一個進度條，當頁面加載時動畫，但我希望它在用戶向下滾動時進行動畫，因爲它將在頁面中間。現在如果頁面加載，用戶看不到動畫。

所以，基本上，應該暫停動畫，直到用戶向下滾動到某個點，一旦條形在視圖中，動畫開始。

這裏的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;你的分度類meter

那是當然的，如果我理解正確你的問題？即使用戶滾動，您希望進度欄保持在視圖中嗎？

更新：

你可以使用類似的inview插件。這裏是download和demo is here。將它包裹在自己的腳本中用於進度條，並且在視圖之前它不會開始動畫。