jQuery 随滚动条滚动效果（固定版）

2011-08-17 分类：JavaScript 37人评论11,171次浏览

前几天写的《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 随滚动条滚动效果（固定版）

您还可以继续浏览 jQuery 滚动滚动条的文章

30访客评论，博主回复6条

#26
很想实现这个效果啊~

icecream设计创意分享04-03 22:34 回复
#25
ZBLOG里面能用上吗?

top资讯03-22 11:33 回复
- 这个jquery跟程序无关的！当然是可以的！不光wp和zb 其它任何程序都可以的！！！
  
  zblog管理员之家03-25 23:23 回复
#24
http://www.jokeone.net

笑死鸟02-08 13:16 回复
#23
请问下，这个代码是要插入到哪个地方？可以详细说明一下吗？

mack02-03 18:23 回复
#22
前端玩起来真是太悬了

锐想01-04 19:28 回复
#21
我好恨，我恨我JS不够好！

胎盘素12-27 09:32 回复
#20
这个用js实现的确实有点卡，我见过用其他方法的，当边栏到顶部的时候用js加上一个fixed样式，这样就很流畅了，一点不卡。

luguo12-18 16:08 回复
#19
非常有用东东

骆恒安11-22 17:48 回复
#18
你这个效果，源于Portamento.js是吗？

pengchaovista10-28 17:07 回复
#17
喜欢这效果，哈哈

小波10-25 18:49 回复
#16
严重鄙视飘过不留毛的鸟。哈哈
浩子哥很厉害，会长期在大前端学习。
谢谢关照

一只柯楠10-25 16:01 回复
#15
嘿嘿～～来学习哈～～

MurphyL10-15 23:32 回复
#14
ie6下面好像不起作用的

yfztcy10-08 10:52 回复
- 是的，无视IE6
  
  浩子10-08 18:56 回复
  - 无视IE6，可以省好多事情！看了你的文章受益匪浅！
    
    小吉猪10-18 17:22 回复
#13
顶啊顶啊，很酷

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

方刀刀10-04 15:33 回复
#12
效果不错

绿茵豪门09-14 15:33 回复
#11
都不丢演示..

孔维聪08-27 13:58 回复
- 演示我放群共享了里了，你可以到群里看一下
  
  蝈蝈08-30 08:57 回复
#10
这段加在哪部分啊，我的加进去怎么不管用啊？有个例子能参考下么

蝈蝈08-26 16:27 回复
#9
兄弟，搞不越来越不错了哦，顶一个，

神秘唯一08-25 10:04 回复
- 多顶顶是好事儿
  
  浩子08-25 14:23 回复
#8
效果灰常不错，拿走

双陈记08-23 22:37 回复
#7
明天转载走。哈哈。

三分钟08-20 17:10 回复
#6
不管怎么说。效果都不错。

wmtimes08-18 23:38 回复
#5
谢谢，不过为什么我看你的右侧下拉时会略显卡，不知道是WP问题还是什么，新版糗百（www.qiushibaike.com）的就很流畅~~~呵呵，不要闲我烦~~

IM路人08-18 10:11 回复
- 哈哈，难道是RP问题，我这不卡
  
  浩子08-18 11:11 回复
- 看起来似乎还好。不过你还有个滑动导航的东东，错觉？
  
  loosky08-18 14:33 回复
#4
出固定版了啊呵呵··支持一下啊···
那个滚动到一定程度然后随动的功能不错啊···

heson08-17 17:57 回复
#3
rollOut 这个部分的貌似还得加上哦，不然在某些情况下，会出现重叠。

loosky08-17 16:10 回复
- 嗯，那是rollStart后面内容很多的情况下，综合一下吧，哈哈
  
  浩子08-17 16:28 回复
#2
这家伙抢沙发上瘾了。呵呵

loosky08-17 16:00 回复
- 你也不错啊，很速度
  
  浩子08-17 16:00 回复
#1
先坐沙发慢慢看~~
感谢啦哈哈

iSayme08-17 15:54 回复
- 同样的文章，又是哥们占先，感动啊
  
  浩子08-17 15:58 回复