jQuery插件:滾動固定在某個位置

插件需求

jQuery插件主要解決滾動過程中固定某個元素,并支持到達某個位置后停止在那里隨頁面向上滾動,當滾回來時,重新固定起來。兼容IE6。

使用場景

當我們滾動網頁瀏覽時,我們想將側欄的某個廣告或者精選文章固定在那里,這樣用戶滾動下來時側欄就不是空白的,增加曝光率和點擊率,增加收入和流量。
當然有時候設計網頁時,側欄也會用到一邊是固定浮動在那里,一邊是滾動的。這種情況我們也同樣是可以用這個插件。

使用代碼:

var fix = $(".fix"), fixtop = $(".fix-top"), fixStartTop = $(".fix-startTop"), fixStartBottom = $(".fix-startBottom"), fixbottom = $(".fix-bottom"), fixfooter = $(".fix-footer");
fix.scrollFix(); //第一種
fixtop.scrollFix({distanceTop:20}); //第二種
fixStartTop.scrollFix({startTop:"#startTop"}); //第三種
fixStartBottom.scrollFix({startBottom:"#startBottom"}); //第四種
fixbottom.scrollFix({endPos:300});//第五種
fixfooter.scrollFix({endPos:"#fixFooter"}); //第六種
fixbottom.scrollFix({distanceTop:20,startTop:"#startTop",endPos:300}); //第七種
fixfooter.scrollFix({distanceTop:10, startBottom:"#startBottom", endPos:"#fixFooter"}) //第八種

參數詳解

參數名字參數值參數作用
startTopnull開始固定的jquery對象的頂部
startBottomnull開始固定的jquery對象末端,兩個參數都設置的話,默認后面參數生效
distanceTop0/null數值,距離頂部的高度,可以為高度或者jquery對象
endPosnull/0距離底部的高度,可以為高度或者jquery對象
bottom-1默認不使用位置為bottom的值,當設置為0,將會停在窗口底端
zIndex0當沒有設置這個值時,將默認使用元素的css z-index值
baseClassName'scrollfixed'當元素開始固定時給它添加一個class,你可以設置為你喜歡的類名。

插件下載

此處內容需要登錄并 發表評論 才可見

在線演示

推薦:整合的在底部、側欄和底部同時固定的演示

第一種:默認滾動到這里開始固定

第二種:滾動到距離這里頂部20像素開始固定

第三種:滾動到一個標簽#startTop的頭部開始固

第四種:滾動到一個標簽#startBottom的末端開始固定

第五種:滾動停在底部300像素

第六種:滾動停在底部#fixFooter的位置

第七種:混合模式:元素距離頂部20像素,滾動到某個標簽開始滾動,最后??吭诘撞?00像素位置

第八種:混合模式:距離頂部10像素,到某個標簽的底部開始浮動,??吭谀硞€標簽的位置

v1.3(2014.6.17)版本更新,感謝Plāybǒy發現的bug,并將其告知我:

  • 修復了當設置開始固定的高度大于元素距離頂部高度時,不處理浮動固定
  • 修復了元素的高度加上margin-bottom的值
  • 修復了當元素沒有觸發position:fixed時,給元素增加一個填充元素的高度。
v1.4 (2014.9.4) 版本更新,感謝兼程發現的bug,并將其告知我:

  • 修復了上次開始停止固定的高度大于元素距離底部高度時,不處理浮動固定
  • 數值改為浮點數
  • 增加了對marginBottom為auto時的處理
  • 增加了兩個混合的使用例子
  • 兼容IE6
  • 增加了對body有top值時修正固定的頂部高度
v1.7 2014-9-29

  • 增加了三個參數,分別是bottom、zIndex和baseClassName.
  • 支持自適應布局,支持縮小窗口,即resize
  • 兼容IE6,支持上一級為position:relative或者position:absolute.
  • 如果沒有什么重大的改動的話就是最后一個版本了。
  • 另外附上一個scrollfix-1.4.js的版本,這個是不支持自適應的最后一個版本,同時也沒有以上加的三個參數。
原文:jQuery插件:滾動固定在某個位置 ,未經許可,禁止轉載。
來源:前端開發博客 (http://www.guofuju.cn/scrollfix)
  • 置頂評論
  • 總體感覺還是很實用的,希望能往精簡實用方面發展,不要搞成全能的那種,反而讓很多人不會用[嘻嘻]

    PP登錄回復

jQuery插件:滾動固定在某個位置 有201個評論

  1. 沈少杰

    奇葩啊,評論要審核,審核完才能看demo,我以為我看的是國家機密啊?

    登錄回復
  2. 沈少杰

    看看先

    登錄回復
  3. Haismile_wang

    試試

    登錄回復
  4. i蘇以

    折騰試試,我一直在找這種插件。

    登錄回復
  5. 武漢番茄哥

    折騰試試,我一直在找這種插件。

    登錄回復
  6. 李俊WH

    好像不錯,試試先!~

    登錄回復
  7. tanxiao1977

    很有用

    登錄回復
  8. 前端男孩

    我來看看的

    登錄回復
  9. Benjamin_LT

    登錄回復
  10. 帽子二

    學習

    登錄回復
  11. 那我就叫程哲林好了

    來來學習一下

    登錄回復
  12. 阿啰哈傻乎乎

    來來學習一下

    登錄回復
  13. Canglingyue

    xuexixi

    登錄回復
  14. yin_謙_釋饅頭

    來學習一下

    登錄回復
  15. 弱弱Somnus

    需要學習

    登錄回復
  16. 弱弱Somnus

    很實用的

    登錄回復
  17. 李嘉杰dicky

    學習學習

    登錄回復
  18. sexcyin

    學習一下

    登錄回復
  19. 大鵬ME

    試試

    登錄回復
  20. ventiespresso

    學習一下:)

    登錄回復
  21. 素描你的美199309

    學習一下啊

    登錄回復
  22. Genuine_馮沖_霧是人非

    學習一下

    登錄回復
  23. J195717

    評論了看得見效果?

    登錄回復
  24. JooiForest

    評論 了 看得見不?

    登錄回復
  25. JooiForest

    看看效果

    登錄回復
  26. 豬豬豬豬豬_俠

    不知道穩不穩定

    登錄回復
  27. 丶Ys灬

    學習

    登錄回復
  28. 我寧愿奔跑

    學習一下,謝謝分享

    登錄回復
  29. 我寧愿奔跑

    學習中

    登錄回復
  30. 我寧愿奔跑

    學習

    登錄回復