CSS Scroll技巧欄動畫

Question

我正在找點東西like this。我使用this answer here的代碼，但答案從來沒有完全清楚。建議他們使用this jquery plugin here，但我一直無法使其工作。我會用第一個例子的代碼，只使用Foundation 4，並且進度條是隨它一起提供的，並且更容易創建。此外，第二個示例中提供的動畫代碼更清晰 - 總體而言，第一個示例有點雜亂，代碼繁瑣且冗餘。

我的密碼是here。我正在關於部分的技能欄。在用戶到達這一點之前，動畫應該暫停。一旦用戶滾動到頁面的這一部分，動畫就應該播放。

編輯：此外，如果您有任何建議來阻止從縮放頁面（此網站旨在響應）「打破」從他們的容器出來的酒吧，我也很感激。編輯2：我注意到，我一直在玩這個溢出：隱藏; on .progress修復了我的「突破」問題..但是，當您調整窗口大小時，尺寸保持在他們初始化的位置。我知道實際上訪問我的網站的用戶很可能不會調整窗口的大小，但對於看着它的僱主來說，如果它不能正常工作，它會有點跛腳。我在脾氣暴躁的貓按鈕疊加層的第一個尺寸初始化時出現了同樣的問題，並且之後沒有重新調整疊加層的尺寸。對此的建議將真的非常感謝！

Answer 1

如果你知道你的技能欄在哪裏，並且你知道你的屏幕在哪裏，你只需要javascript。 （無插件或奇怪的東西）

爲了讓您的屏幕的垂直位置很簡單：

window.pageYOffset 

爲了讓您的div的垂直位置，你只需要

div.offsetTop 

在你情況下，我會提供一個ID給包裝所有技能欄的div，並設置一個循環（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（'。擴大'）是非常容易的。

希望這會有幫助