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. Zane_Chang

    不错的插件 找对了

    登录回复
  3. 奥黑之光

    dddddddd

    登录回复
  4. 何必再健

    不错想要的插件!看看!

    登录回复
  5. M1ngx

    看看有没有

    登录回复
  6. richcem-健-V

    学习一下,值得借鉴

    登录回复
  7. 浙江永球

    ie6是否可用

    登录回复
  8. llwang47915

    学习一下,值得借鉴

    登录回复
  9. 糊疯100684

    [呵呵]试试看!

    登录回复
  10. Steven

    顶!看一下

    登录回复
  11. 金牛永不言败2011

    分享的内容很好,很实用

    登录回复
  12. 程铭Elaine

    登录回复
  13. Elaine

    登录回复
  14. ps教程论坛

    请注意保护个人隐私

    登录回复
  15. 悠然白鹿

    要重新评论哇!!!

    登录回复
  16. 那里的黄土地

    很实用的页面扩展。

    登录回复
  17. 母婴街

    希望能往精简实用方面发展

    登录回复
  18. 感觉还是

    总体感觉还是很实用的,希望能往精简实用方面发展[嘻嘻]

    登录回复
  19. 雷利诺电动车

    具体效果是什么样

    登录回复
  20. ailsa_18139

    看看,不知道怎么样,现在正好项目想用

    登录回复
  21. 第三方斯蒂芬

    萨芬的

    登录回复
  22. 零下城池

    试试

    登录回复
  23. 雅丹_Ada

    [呵呵]

    登录回复
  24. 华考网小屋

    确实不错的说

    登录回复
  25. 搜索

    你iubi呢

    登录回复
  26. 潮族网站管理

    [哈哈]

    登录回复
  27. wandering-wind

    瞅瞅呗

    登录回复
  28. qyqdbd

    不错的插件!

    登录回复
  29. aaaxxxx-

    看看博主的功力如何

    登录回复
  30. 123tvb

    看看效果

    登录回复
  31. 因特而世界

    非常不错,继续了解

    登录回复
  32. 因特而世界

    阿大饭店

    登录回复
  33. 小喆仁仁

    真是我想要的效果[呵呵]

    登录回复
  34. wwfgu00ing

    kankanzaishuo

    登录回复
  35. 狂风风风风风

    不知道怎么样

    登录回复
  36. qxcnko

    能不能固定在任意位置

    登录回复
  37. LCY

    先看看效果

    登录回复
  38. 谢谢你四叶草

    我看看效果啊

    登录回复
  39. PP

    [嘻嘻]直接scroll的时候reset,可避免图片加载未完成等高度变化的问题,后面那个窗口改变也不用判断了

    $(window).on("scroll", function() {
    if (Timer) {
    clearTimeout(Timer);
    }
    Timer = setTimeout(function() {
    isUnfixed = false;
    resetScroll();
    onScroll();
    }, 0);
    });

    登录回复
    • PP

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

      登录回复
    • 前端博客

      亲,你这样子很耗内存的,每时每刻都在reset。一滚动就reset,一滚动就reset,哭了cpu,嗯,你看看1.4版的就是精简版的。没有判断窗口改变的。很简单就能够看懂的。

      登录回复
  40. PP

    endPos不太合理,应该在滚动中时时获取。
    因为随着页面内容(图片,ajax等)的加载,endPos元素的位置变了。

    登录回复
  41. 蚊子

    这个插件是我目前找到的最好用的一个! 就是github的源码里面文件命名以及垃圾文件有点碍眼. 总之谢就一个字!!!

    登录回复
  42. 漫步兄

    嗯,测了一下原来div{padding:20px}会有bug,还要配好来用,但我的站用起来还正常。

    登录回复
  43. 漫步兄

    没有用过github上或者codepen.io,我放到csdn了,目前项目需要顶部固定。高级的功能太难了。。。只有顶部固定
    http://blog.csdn.net/thanksregards/article/details/39988791

    登录回复
    • 前端博客

      将你的jquery插件测试了一下,发现不怎么行哦。你可以看看我最开始写的不支持resize的那个,https://github.com/kujian/scrollfix/blob/master/js/scrollfix-1.4.js。你可以看看:http://caibaojian.com/demo/2014/12/fixedLayout.html,另外建议写插件最好写上注释,方便别人查看或者以后修改。

      登录回复
  44. 漫步兄

    我参照你的代码,也做了一个,不过只是没有这么强大,
    如果固定层是float的,则在外层增加float用来定位,然后包含固定的内容。

    $.fn.fixedLayout = function (options) {
    options = options || {};
    var ie6 = !-[1, ] && !window.XMLHttpRequest;
    this.each(function (i, o) {
    var obj = $(o);
    var startTop = obj.offset().top;
    var pd = obj.outerHeight(true) - obj.outerHeight();
    var endPos = options.endPos || 0;

    function fixed() {
    var objh = obj.height();
    var doch = $(document).height();
    var wintop = $(window).scrollTop();

    if (wintop doch) {
    if (flag != 2) {
    ie6 && (flag == 3) && divpos[0].style.removeExpression('top');
    flag = 2;
    divpos.css({ position: 'absolute', top: (doch - endPos - objh - pd) + 'px' });
    }
    }
    else {
    if (flag != 3) {
    flag = 3;
    if (ie6) {
    divpos.css({ position: 'absolute' });
    divpos[0].style.setExpression('top', 'eval(document.documentElement.scrollTop)');
    }
    else {
    divpos.css({ position: 'fixed', top: -pd + 'px' });
    }
    }
    }
    }

    var divpos = $('');
    var float = obj.css('float');
    var flag = 0;
    if (float != 'none') {
    var wrap = $('');
    wrap.append(divpos);
    obj.before(wrap);
    divpos.append(obj);
    }
    else {
    divpos.css('width', obj.outerWidth(true) + 'px');
    obj.before(divpos);
    divpos.append(obj);
    }

    fixed();
    $(window).scroll(fixed);
    });
    return this;
    }

    登录回复
    • 前端博客

      代码有些被转义了。有些地方不太清楚,假如你可以把他贴在github上或者codepen.io上就更好了。当内容固定起来时,一般需要添加一个填充内容在那里,否则会影响页面变形。我看了你好像没有这个最重要的部分,用户体验不太好。

      登录回复
  45. 漫步兄

    下面有多张图片加载慢,好像有bug

    登录回复
  46. lazyload

    和lazyload一起使用,好像有问题

    登录回复
    • 前端博客

      可能是你的lazyload使用不太正确,lazyload需要使用css控制图片的宽高度或者给他加一个div的。所以不存在问题,假如你的图片既没有加宽高度,外面也没有给他加css宽高度,自然有问题,lazyload新版是强烈要求要加一个宽度和高度的。

      登录回复
  47. Yafei

    chrome下页面过长固定层会消失,IE8没事。

    登录回复
    • 前端博客

      我不知道如何测试你这种情况,你可否发个静态页面案例给我看看呢?

      登录回复
  48. qiuqiu

    如果要固定到底部该怎么修改?

    登录回复
    • 前端博客

      这个不是这个插件的功能,我这个插件只是滚动都某个位置开始固定,而你需要的是直接固定在底部。所以不需要使用这个插件。

      登录回复
      • 龙腾松

        但是 左边栏 浮动 到底部 会遮住页面下部内容,能否设置在某一位置取消浮动,且同时该元素能跟随页面一起走,而不是回到原位

        登录回复
        • 前端博客
          回复龙腾松 :

          你好,这个插件已经有你说的功能了。请看第五种和第六种,你可以根据自己要求选择用哪一种方式。

          登录回复
  49. Plāybǒy

    当左侧内容,比右侧内容少,同时右侧固定的内容高度比较高,同时他相对于底部的位置也比较大的时候,无法做到自动取消固定!

    登录回复
  50. 杨涛

    IE6不兼容

    登录回复