关注前端开发
关注用户体验

jQuery 随滚动条滚动效果 (固定版)

前几天写的《jQuery 随滚动条滚动效果 (适用于内容页长文章)》,有几个同学说右侧固定比较好,所以今天就写了个随动固定版。相信一定能解决大部分人的需求!

上代码(基于jQuery):

//侧栏随动
var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动
	rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块

rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"></div>');
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function() {
	if (objWindow.scrollTop() > offset.top){
		if(rollBox.html(null)){
			rollSet.clone().prependTo('.da_rollbox');
		}
		rollBox.show().stop().animate({top:0,paddingTop:15},400);
	} else {
		rollBox.hide().stop().animate({top:0},400);
	}
});

比上个更简单了,请留意注释的地方,是需要根据你的需求添加模块class或者id的。值得注意的是第五行的背景色,默认是白色!

Tips:IE6的粉丝可以加些不支持fixed的代码,这部分浩子不加说明了,你懂的!

ok,还有不懂的可以参见之前的jQuery 随滚动条滚动效果 (适用于内容页长文章),也可以下面留言拍砖!

未经允许不得转载:大前端 » jQuery 随滚动条滚动效果 (固定版)
分享到:更多 ()

评论 50

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #38

    右侧固定直接用上

    性爱姿势2年前 (2015-07-21)回复
  2. #37

    来看看!

    嫩模库3年前 (2014-11-21)回复
  3. #36

    何必呢

    hello_potato4年前 (2013-10-09)回复
  4. #35

    不是吧 无视IE6? 你这种只是适合兴趣,从业者大多为工作所用,都无视IE6 那不都等失业。。。

    dove4年前 (2013-07-20)回复
    • 不再考虑ie6,为抛弃垃圾ie做贡献,前端除了兼容ie6还有很多有意义的事情可以做

      charles3年前 (2014-07-17)回复
  5. #34

    用你的代码,提示:offset.top 为空或不是对象 是什么原因呢??

    重庆网络拓展4年前 (2013-03-29)回复
  6. #33

    静态页面可以实现吗?

    重庆网络拓展4年前 (2013-03-29)回复
  7. #32

    好像在DZ的程序中不起作用呢.////

    蝈蝈5年前 (2013-01-12)回复
  8. #31

    很有用,谢谢了~

    Ashitaka5年前 (2012-12-31)回复
  9. #30

    动态效果很补错,彪悍。。。

    奶茶5年前 (2012-10-22)回复
  10. #29

    浩子能否告知,如何在css中引用js获取的浏览器窗口大小?

    奶茶5年前 (2012-09-18)回复
  11. #28

    怎么用的啊.为什么我用的有问题.是可以滚了.但是往下走是没问题往上走就有问题.会直接到页面顶部.这个要怎么修呢

    xing5年前 (2012-09-14)回复
  12. #27

    方法没做兼容性处理,加到瀑布流主题中会有冲突,不知道怎么改啊。

    wmtimes5年前 (2012-06-08)回复
  13. #26

    很想实现这个效果啊~

  14. #25

    ZBLOG里面能用上吗?

    top资讯5年前 (2012-03-22)回复
    • 这个jquery跟程序无关的!当然是可以的!不光wp和zb 其它任何程序都可以的!!! :mrgreen:

      zblog管理员之家5年前 (2012-03-25)回复
  15. #24
  16. #23

    请问下,这个代码是要插入到哪个地方?可以详细说明一下吗?

    mack6年前 (2012-02-03)回复
  17. #22

    前端玩起来真是太悬了 😮

    锐想6年前 (2012-01-04)回复
  18. #21

    我好恨,我恨我JS不够好! :sad:

    胎盘素6年前 (2011-12-27)回复
  19. #20

    这个用js实现的确实有点卡,我见过用其他方法的,当边栏到顶部的时候用js加上一个fixed样式,这样就很流畅了,一点不卡。

    luguo6年前 (2011-12-18)回复
  20. #19

    非常有用东东 😳

    骆恒安6年前 (2011-11-22)回复
  21. #18

    你这个效果,源于Portamento.js是吗?

    pengchaovista6年前 (2011-10-28)回复
  22. #17

    喜欢这效果,哈哈 😆

    小波6年前 (2011-10-25)回复
  23. #16

    严重鄙视飘过不留毛的鸟。哈哈
    浩子哥很厉害,会长期在大前端学习。
    谢谢关照

    一只柯楠6年前 (2011-10-25)回复
  24. #15

    嘿嘿~~来学习哈~~

    MurphyL6年前 (2011-10-15)回复
  25. #14

    ie6下面好像不起作用的

    yfztcy6年前 (2011-10-08)回复
    • 是的,无视IE6

      浩子6年前 (2011-10-08)回复
      • 无视IE6,可以省好多事情!看了你的文章受益匪浅! 😎

        小吉猪6年前 (2011-10-18)回复
  26. #13

    顶啊顶啊,很酷

    不过我的是谷歌浏览器,当我往下滑动的时候,右边侧边栏的那个热门标签和历史记录标题会脱离上划,要是突然消失就好了
    不知我描述的是否简洁明了

    方刀刀6年前 (2011-10-04)回复
  27. #12

    效果不错

    绿茵豪门6年前 (2011-09-14)回复
  28. #11

    😡 都不丢演示..

    孔维聪6年前 (2011-08-27)回复
    • 演示我放群共享了里了,你可以到群里看一下

      蝈蝈6年前 (2011-08-30)回复
  29. #10

    这段加在哪部分啊,我的加进去怎么不管用啊?有个例子能参考下么

    蝈蝈6年前 (2011-08-26)回复
  30. #9

    兄弟,搞不越来越不错了哦,顶一个, :smile:

    神秘唯一6年前 (2011-08-25)回复
  31. #8

    效果灰常不错,拿走 :mrgreen:

    双陈记6年前 (2011-08-23)回复
  32. #7

    明天转载走。哈哈。

    三分钟6年前 (2011-08-20)回复
  33. #6

    不管怎么说。效果都不错。

    wmtimes6年前 (2011-08-18)回复
  34. #5

    谢谢,不过为什么我看你的右侧下拉时会略显卡,不知道是WP问题还是什么,新版糗百(www.qiushibaike.com)的就很流畅~~~呵呵,不要闲我烦~~

    IM路人6年前 (2011-08-18)回复
    • 哈哈,难道是RP问题,我这不卡

      浩子6年前 (2011-08-18)回复
    • 看起来似乎还好。不过你还有个滑动导航的东东,错觉?

      loosky6年前 (2011-08-18)回复
  35. #4

    出固定版了啊 呵呵··支持一下啊··· :mrgreen:
    那个滚动到一定程度然后随动的功能不错啊··· 😉

    heson6年前 (2011-08-17)回复
  36. #3

    rollOut 这个部分的貌似还得加上哦,不然在某些情况下,会出现重叠。

    loosky6年前 (2011-08-17)回复
    • 嗯,那是rollStart后面内容很多的情况下,综合一下吧,哈哈

      浩子6年前 (2011-08-17)回复
  37. #2

    这家伙抢沙发上瘾了。呵呵

    loosky6年前 (2011-08-17)回复
    • 你也不错啊,很速度

      浩子6年前 (2011-08-17)回复
  38. #1

    先坐沙发 慢慢看~~
    感谢啦 哈哈

    iSayme6年前 (2011-08-17)回复
    • 同样的文章,又是哥们占先,感动啊 😮

      浩子6年前 (2011-08-17)回复

themebetter 国内更好的WordPress主题服务商

立即前往