使用SuperScrollorama + Greensocks進行動畫滾動

Question

我在使用Javascript動畫滾動問題時遇到了一些麻煩。

我使用的是建立在頂部的使用GreenSock JS補間圖書館的SuperScrollorama jQuery插件。我之後的根本作用是「釘住」一個部分，然後使用垂直滾動展開一些內容，然後在內容完全展開後「解除」部分，以便用戶可以滾動 - 即http://blueribbondesign.com.au/example/

但是，當我嘗試將相同的效果一個接一個地應用於多個節時，所有內容都被破壞：固定元素下的「未固定」內容被推離屏幕，並且似乎錯誤地計算了元素的高度當它反向執行動畫時（即滾動備份頁面）。 - 即http://blueribbondesign.com.au/example2/

我一直在無休止地處理「position：fixed」和「pin-spacer」div，並試圖將Superscrollorama插件附加到各種包含元素，但仍然無法解決如何讓它工作。

從網上的輝煌人羣來源的頭腦任何幫助將不勝感激，

乾杯，

TN。

Answer 1

我一直在處理這個問題。會發生什麼情況是，將一個空白div隔離塊放在該部分的上方，並將其固定在pin（）函數中定義的高度處。其次，固定元素得到一個位置：固定分配給它。這些東西都允許滾動條在元素保持粘貼的狀態下繼續向下。反過來，無論你下面的那個部分因爲這個隔離器的高度而被撞倒。

如果固定元件在水平方向居中，第一給它的左：50％，餘量左： - {寬度/ 2} PX從推到左邊緣固定。接下來，您必須檢測pin/unpin事件（插件提供的參數作爲「anim」的附加參數），並更改下面的部分以切換固定/相對位置。當您將底層部分更改爲固定位置時，請確保將其「頂部」屬性設置爲固定元素的高度。一旦固定的元素變成未固定的，將其更改回相對定位。這有任何意義嗎？

看來，不同的技術會需要不同的解決方法，但這些東西是什麼我會注意...固定的位置，然後使用調整的鎖定/解鎖事件。