1. 程式人生 > >固定邊欄滾動特效

固定邊欄滾動特效

應用場景:假如有兩欄佈局,總高度都高於瀏覽器高度,然後左側更高,這時滾動瀏覽器視窗的滾動條,當右邊欄顯示完全時,右邊欄開始固定,左邊欄可以繼續滾動。

技術實現關鍵點:

  • css position fixed(脫離滾動流)
  • 監聽window上的滾動事件
  • 設定fixed的條件判斷:滾動高度+螢幕高度>右邊欄高度;top設定成-(右邊欄高度-視窗高度)。

js實現:

jq實現: