jQuery 随滚动条滚动效果（适用于内容页长文章）

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

直接入题！

当内容页比较长的时候，网站右侧一直是空白，不如放点有用的东西给用户看，最好不要放广告，因为那样很邪恶，你懂的。

好吧，昨天写了这个东西，jQuery滚动随动区块，代码如下：

//侧栏随动
var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动
	rollOut = $('.cookie-list'); //隐藏rollStart之后的区块

rollStart.before('<div class="da_rollbox"></div>');

var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(),
	rollSet = $('.search,.weibo,.group'); //添加rollStart之前的随动区块

objWindow.scroll(function() {
	if (objWindow.scrollTop() > offset.top){
		if(rollBox.html(null)){
			rollSet.clone().prependTo('.da_rollbox');
		}
		rollOut.fadeOut();
		rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400);
	} else {
		rollOut.fadeIn();
		rollBox.hide().stop().animate({marginTop:0},400);
	}
});

码中已有完整注释，只需要写上几个class或者id（最好不要是id，w3c规定id不能重复使用）。

如还有不明白的地方，留言！

下面是大前端设置的随动区块，还实用吧！！

转载请注明：大前端 » jQuery 随滚动条滚动效果（适用于内容页长文章）

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

31访客评论，博主回复5条

#24
果断收藏啊，好东西

FKBlog04-27 15:12 回复
#23
不知道代码应该怎么用.放在哪些地方?

blueman02-06 12:21 回复
#22
现在这个功能已经撤消了么，怎么没看到效果。
ie7

aszx041302-03 09:11 回复
#21
既然如此，拨个毛吧…

shirne12-06 12:07 回复
#20
这个用户体验很好！细节决定成败吖！
pS：发现历史记录这个便签向上滚动了，360浏览器。

skway10-20 15:49 回复
#19
热门标签在ff下可能有点问题。慢慢的下拉滚动条看看

向你学习09-14 14:13 回复
#18
这段代码应该放在哪个位置啊，我怎么放进去不起作用呢，能否提供一个例子参考下呢

蝈蝈08-26 16:47 回复
- 本站右侧就是例子
  
  浩子08-26 17:09 回复
  - 我按照这个写了一个简单的页面，class的名字都没动，可是不行呢，我从QQ上传给你能帮我看下么
    
    蝈蝈08-26 17:11 回复
    - 支持一下！
      
      老下11-09 09:44 回复
  - Yes
    
    abc11-11 10:19 回复
#17
这个效果太棒了, 很喜欢. 谢谢浩子!!

饭饭08-24 10:31 回复
#16
不错，超强。学习了。

John08-15 17:19 回复
#15
我也遇到无限下拉的问题了！不知道怎么搞额！

蓝色离子08-13 20:51 回复
- 滚动区域的长度不能太长，否则会出现无限下拉的bug。
  
  loosky08-14 09:25 回复
#14
没想到快要下网了，还能看到这么有价值的文章，呵呵，。有时间试试效果

倡萌08-13 19:20 回复
#13
哎呀，好牛逼哦！

滑触线08-13 14:33 回复
- 哈哈，只是简单的运用jq
  
  浩子08-17 15:53 回复
#12
强大！

蓝色离子08-13 11:41 回复
- 同意
  
  abc11-15 10:19 回复
#11
这个蛮有用，想拿来试试。

木木08-12 22:41 回复
#10
按照这个代码，在我page页面上有一些问题，侧边栏可以一直往下滚动。文章页貌似没有问题，刚才看了你的page页面，也没有类似的问题，不知道什么原因呢？
http://loosky.net/?page_id=1651 比如这个页面。

loosky08-12 19:07 回复
- 滚动区域的长度不能太长，否则会出现无限下拉的bug。可否改善一下？同时可以考虑把滚动区域给固定下来，可能会更合适一些？
  
  loosky08-13 14:27 回复
  - http://www.daqianduan.com/jquery-roll-fixed/ 固定版
    
    浩子08-17 15:48 回复
#9
好用，收下了。

夜色倾城08-12 13:38 回复
#8
好东西，能不能固定，要不然下拉时会有抖抖的感觉

IM路人08-12 11:16 回复
- 是有一些抖的感觉。
  
  loosky08-12 15:21 回复
- http://www.daqianduan.com/jquery-roll/ 固定版本
  
  浩子08-17 15:54 回复
#7
灰常喜欢，D4的进程加紧呀

palese08-12 10:47 回复
#6
忘记在哪也看到过这个效果了，是个灰常不错的体验。

radom08-11 20:39 回复
#5
这个相当有用。

loosky08-11 19:12 回复
#4
小东西不错。很实用。

wmtimes08-11 17:12 回复
#3
效果不错！

半盏凉茶08-11 14:12 回复
#2
严重支持，这个用户体验不错！

没啥说的！08-11 13:45 回复
#1
沙发收下~~
有空试试去~~

iSayme08-11 10:54 回复
- 真是速度啊
  
  浩子08-11 10:57 回复