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像素,滚动到某个标签开始滚动,最后停靠在底部300像素位置

第八种:混合模式:距离顶部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://caibaojian.com/scrollfix)
评论已关闭。
  • 置顶评论
  • 总体感觉还是很实用的,希望能往精简实用方面发展,不要搞成全能的那种,反而让很多人不会用[嘻嘻]

    PP登录回复

“jQuery插件:滚动固定在某个位置”有201个评论

  1. 向着目标go

    学习

    登录回复
  2. 随风飞扬-79

    我想看看源码,自已弄了一个有问题。

    登录回复
  3. 哈喽why123

    看看能不能实现我想要的效果

    登录回复
  4. 我的少年会发光吖

    我想看看源码

    登录回复
  5. 萌萌的山岚烟雨

    我想看看源码

    登录回复
  6. 赵建鹏ZJP

    好用吗,看看再回来评论

    登录回复
  7. FLA_RZ

    好像很有用的样子,发评论试试……

    登录回复
  8. 杰仔0321

    很好

    登录回复
  9. 橙子糖m

    登录回复
  10. 猫姥爷_99830

    不知道能用吗

    登录回复
  11. Fly-1234

    yes! is good

    登录回复
  12. 野生的小湊

    谢谢了~

    登录回复
  13. Beginning丶2015

    很实用!想看

    登录回复
  14. 涉死温暖-兼桑-大-法-好

    感觉很实用的插件

    登录回复
  15. sss20002015

    不知道能用不,谢谢

    登录回复
  16. 陈贤子

    不错 俩是是

    登录回复
  17. 陈小军96555

    二恶

    登录回复
  18. xixihaha马甲傻乎乎

    试试

    登录回复
  19. sky1320

    下载来看看~

    登录回复
  20. colours10

    哈哈,这个是好东西,下载看看。

    登录回复
  21. 创神-网络

    21231dsfddsfs

    登录回复
  22. 米饭很湿

    试一下呢

    登录回复
  23. Jeavidesgin

    求下载

    登录回复
  24. 导演我要加鸡腿

    毒德大学

    登录回复
  25. yan123456_20751

    qqsfd

    登录回复
  26. PIGMayun

    shishikan

    登录回复
  27. iyoodo亲子游

    看一下什么个情况

    登录回复
  28. 游走前端

    很好

    登录回复
  29. 子有飞翔

    看看如何

    登录回复
  30. fuwu1245

    发表评论之后才能看,这个博客是不是设计的不太好啊?

    登录回复
  31. 任任小义

    看看效果怎么样

    登录回复
  32. 爬虫的地带

    看看效果

    登录回复
  33. 爬虫的地带

    正需要

    登录回复
  34. 枫子波丶

    看看

    登录回复
  35. easydesign77

    正在找這好東西,感謝!

    登录回复
  36. 微科软件科技

    总体感觉还是很实用的,希望能往精简实用方面发展,不要搞成全能的那种,反而让很多人不会用[嘻嘻]

    登录回复
  37. 用脑时代

    看看是什么

    登录回复
  38. 红红不红

    据说更新了,看看,谢谢。

    登录回复
  39. 不容易网

    看看

    登录回复
  40. marco_112977

    研究一下

    登录回复
  41. 深蓝

    了解下,谢谢。

    登录回复
  42. junius2010

    非常不错的效果!

    登录回复
  43. 57楼

    不知这个插件好不好用,先谢谢博主

    登录回复
  44. 57F

    不知这个插件好不好用,先谢谢博主

    登录回复
  45. zhimengzhe

    肿么看不到呢

    登录回复
  46. 张晃晃_

    为什么还是在审核我!!!!想下个东西就这么难吗!!!!

    登录回复
  47. 魯中-O-華仔

    进来看看

    登录回复
  48. kinghowe

    不错!

    登录回复