曾经拥有的,不要忘记。不能得到的,更要珍惜。属于自己的,不要放弃。已经失去的,留作回忆。

添加侧边栏随滚动条滚动效果

BLOGGY 32977浏览 0评论

我最早是在老肥博客上看到这个效果的,他的评论框可以随侧边栏一起滚动,比较人性化的,效果如下:

刚好今天在浩子的博客上看到了这个效果的实现代码,于是折腾了一下,把这个代码加上了。当文章或页面的内容比较长的时候,侧边栏可以显示一些内容,免得给人空荡荡的感觉。

步骤如下:

1、给侧边栏的各个模块加上一些class标志,如下图框框里面的内容:

如果你的侧边栏之前已经有了这些class标志加以区分,只要使用就可以了,不用另外加。

2、在主题的js文件中加上如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动
	rollOut = $('.Meta,.Statistics'); //随动区域可能包括一些您不需要的模块,可以选择隐藏
rollStart.before('<div class="rollbox"></div>'); //这个可以不用修改
 
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(),
	rollSet = $('.Posts,.Hots,.Tags'); //这里选择你要随动的模块的class标志
 
objWindow.scroll(function() {
	if (objWindow.scrollTop() > offset.top){
		if(rollBox.html(null)){
			rollSet.clone().prependTo('.rollbox');  //注意与上面的保持一直,不用做修改。
		}
		rollOut.fadeOut();
		rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400);
	} else {
		rollOut.fadeIn();
		rollBox.hide().stop().animate({marginTop:0},400);
	}
});

注:滚动区域的内容不能太长,不然会出现无限下拉的情况。

3、小站的效果如下:

------------------------更新(2011-8-23)-------------------------------------
浩子发布了固定版的代码,但是有些bug,在某些情况下,会出现重叠。

综合之前的代码,结合现在固定版的代码,我的代码如下,效果比较不错。替换上面第二步的代码即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动
	rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块
	rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块
 
rollStart.before('<div class="rollbox" style="position:fixed;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('.rollbox');
		}
		rollOut.fadeOut();
		rollBox.show().stop().animate({top:0,paddingTop:10},400);
	} else {
		rollOut.fadeIn();
		rollBox.hide().stop().animate({top:0},400);
	}
});

转载请注明:自由的风 » 添加侧边栏随滚动条滚动效果

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (50)

  1. 弄好了好老半天,就是不出效果,郁闷死了,求解

    疯了2012-05-23 16:12 回复
    • 侧边栏比旁边的内容短的时候,才会有这个效果。
      另外ID标号注意不要弄错了,代码很简单。你可以根据代码琢磨一下。

      自由的风2012-05-23 21:34 回复
  2. http://www.zhiwenweb.cn/Category/Website/sidebar-scroll-jquery.html
    用这篇文章中的第一种方法可以实现,用你的方法实现不了,不知道什么个情况。
    不过你的这个比较强大,还是想用你的,求指点…

    买点儿肉2012-07-06 16:36 回复
  3. 用你的代码,提示:offset.top 为空或不是对象 是什么原因呢??

    重庆网拓2013-03-29 13:47 回复
  4. 带CLASS的标签必须是DIV么?

    老蒲2013-03-31 17:54 回复
  5. 我想固定的侧边栏是WP默认小工具的“文本”,要怎么样定义文章所的说的呢?找了一晚上都没有结果,希望老大能够赐教!

    ericshaw2013-05-11 02:48 回复
    • 1、要注意你的侧边栏的结构是否跟本文的一致,否则代码中要做一定的修改;
      2、rollOut = $(‘.Meta,.Statistics’); 是要跟随的模块,你可以修改成你对应的模块。

      自由的风2013-05-12 18:51 回复
  6. 问一下,第一步中”给侧边栏的各个模块加上一些class标志” 应该在哪里添加?style.css这个文件里吗?

    Capbone2013-08-02 19:43 回复
  7. 我测试了一下,不行 可能是我的class没有做好的原因。希望老大把你的 模板那段代码也贴出来吧 我对照一下看看怎样修改 可以么?

    李信言2014-01-14 19:14 回复