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登录回复

201 Responses to “jQuery插件:滚动固定在某个位置”

  1. 闪光的麒麟臂_75110

    不是吧

    登录回复
  2. 沈少杰

    奇葩啊,评论要审核,审核完才能看demo,我以为我看的是国家机密啊?

    登录回复
  3. 沈少杰

    看看先

    登录回复
  4. 金山铁路时刻

    333

    登录回复
  5. Haismile_wang

    试试

    登录回复
  6. i苏以

    折腾试试,我一直在找这种插件。

    登录回复
  7. 武汉番茄哥

    折腾试试,我一直在找这种插件。

    登录回复
  8. 李俊WH

    好像不错,试试先!~

    登录回复
  9. tanxiao1977

    很有用

    登录回复
  10. 前端男孩

    我来看看的

    登录回复
  11. Benjamin_LT

    登录回复
  12. 帽子二

    学习

    登录回复
  13. 那我就叫程哲林好了

    來来学习一下

    登录回复
  14. 阿囉哈傻乎乎

    來来学习一下

    登录回复
  15. Canglingyue

    xuexixi

    登录回复
  16. yin_谦_释馒头

    来学习一下

    登录回复
  17. 弱弱Somnus

    需要学习

    登录回复
  18. 弱弱Somnus

    很实用的

    登录回复
  19. 李嘉杰dicky

    学习学习

    登录回复
  20. sexcyin

    学习一下

    登录回复
  21. 大鹏ME

    试试

    登录回复
  22. ventiespresso

    学习一下:)

    登录回复
  23. 素描你的美199309

    学习一下啊

    登录回复
  24. Genuine_冯冲_雾是人非

    学习一下

    登录回复
  25. J195717

    评论了看得见效果?

    登录回复
  26. JooiForest

    评论 了 看得见不?

    登录回复
  27. JooiForest

    看看效果

    登录回复
  28. 猪猪猪猪猪_侠

    不知道稳不稳定

    登录回复
  29. 丶Ys灬

    学习

    登录回复
  30. 我宁愿奔跑

    学习一下,谢谢分享

    登录回复
  31. 我宁愿奔跑

    学习中

    登录回复
  32. 我宁愿奔跑

    学习

    登录回复