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. 电波

    拜访下

    登录回复
  2. 蓝雨易卓

    看看

    登录回复
  3. 深蓝

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

    登录回复
  4. DYstyle

    拜访下

    登录回复
  5. 哈哈大百科

    看看

    登录回复
  6. 甜饼座的蛇精病大叔

    有这么牛逼啊

    登录回复
  7. 吖吖__

    听说需要评论后可见

    登录回复
  8. ygtzz

    看看效果

    登录回复
  9. 用户5306955475

    看看

    登录回复
  10. 用户661471ivvp

    看看怎么样[呵呵]

    登录回复
  11. 峰泛

    看看效果撒

    登录回复
  12. 威震六

    试一试
    [嘻嘻]

    登录回复
  13. PCDotFan

    看看效果撒~

    登录回复
  14. PCDotFan

    看一下效果~

    登录回复
  15. 开始放纵使然

    demo

    登录回复
  16. theblue大象

    发表一下评论

    登录回复
  17. theblue大象

    想看看怎么样

    登录回复
  18. 温暖的逗逗

    看看demo

    登录回复
  19. 最后一年见习魔法师

    看看效果如何

    登录回复
  20. 该死的心动74245

    看看怎么样...

    登录回复
  21. 该死的心动74245

    总体感觉还是很实用的,希望能往精简实用方面发展,不要搞成全能的那种

    登录回复
  22. wen4e

    看一下里面的源码

    登录回复
  23. 忆轩庭

    撒的发撒打发四大分散点分散点

    登录回复
  24. 忆轩庭

    听说要发布评论了才能看

    登录回复
  25. 林岑影

    什么东西呢?

    登录回复
  26. 苍井先森

    非常酷,cool

    登录回复
  27. tw10000

    cool[可怜]

    登录回复
  28. HR_luobin

    学习中[嘻嘻]

    登录回复
  29. senla520

    谢谢

    登录回复
  30. 热情来吧

    正好拿来学习,非常不错的效果

    登录回复
  31. 落叶划沙

    学习学习![太开心]

    登录回复
  32. 9楼房管-橙紫

    学习学习

    登录回复
  33. canoe露

    想看下

    登录回复
  34. 我是的我的档

    想看看

    登录回复
  35. engling_cn

    看看。。。

    登录回复
  36. 羽之根

    看看

    登录回复
  37. 戒凡Yanjia

    很好的插件

    登录回复
  38. 范小范_1988

    看看

    登录回复
  39. imeey

    看看学习下

    登录回复
  40. 加油天猫

    喜欢,喜欢

    登录回复
  41. Shanw大頭

    GOOD!
    [嘻嘻]

    登录回复
  42. 露路011

    还没有用试一下吧[嘻嘻]

    登录回复
  43. 234

    23423

    登录回复
  44. flysoft100

    很好。

    登录回复
  45. 咬牙棒

    看下

    登录回复
  46. leo郑义

    看看

    登录回复
  47. 空想科学2

    看看

    登录回复
  48. 健众网

    下载使用下

    登录回复
  49. 宽度非凡

    很好的插件啊

    登录回复