自由的风's Archivers

From 自由的风 on 2011-08-12 15:16:49

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

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

<img class="alignnone size-medium wp-image-2029" title="fisio" src="http://loosky.net/Upload/2011/08/fisio-600x350.jpg" alt="" width="600" height="350" />

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

步骤如下:

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

<img class="alignnone size-full wp-image-2030" title="sidebar" src="http://loosky.net/Upload/2011/08/sidebar.jpg" alt="" width="287" height="199" />

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

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


var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动
rollOut = $('.Meta,.Statistics'); //随动区域可能包括一些您不需要的模块,可以选择隐藏
rollStart.before(''); //这个可以不用修改

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、小站的效果如下:
<img src="http://loosky.net/Upload/2011/08/jqurerool-600x430.jpg" alt="" title="jqurerool" width="600" height="430" class="alignnone size-medium wp-image-2031" />


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

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

var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动
rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块
rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块

rollStart.before('');
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);
}
});

查看完整版本: 添加侧边栏随滚动条滚动效果

From DH on 2011-08-12 17:58:38

不错。这个功能还是很人性化的。

From Dianso on 2011-08-12 18:14:29

效果很好 :mrgreen:

From 自由的风 on 2011-08-12 18:48:02

可以尝试一下。

From 自由的风 on 2011-08-12 18:49:24

尝试一下?呵呵

From 傅小黑 on 2011-08-12 20:53:52

有bug,chrome下可以无限下拉

From 自由的风 on 2011-08-12 20:56:34

是的,IE下面也是一样,但是在本地调试不会出现这个问题。

From IM路人 on 2011-08-13 10:10:03

看到效果,如果能像新版的“糗百”固定滑动就好了~~~

From 自由的风 on 2011-08-13 11:47:01

这个效果在我的主题上还有些bug,可以无限下拉,但在本地调试没有问题。百思不得其解啊。

From 自由的风 on 2011-08-13 14:23:31

已经搞定了,滚动区域的长度不能太长,减掉一些内容就可以了。

From ixdao on 2011-09-16 10:17:20

:sbq: 第一步在哪个文件里弄呢?sidebar.php里么有 我的侧边栏是用小工具添加的。 谢谢解答

From 最近要折腾的 - 小四's BLOG on 2011-09-16 13:30:54

[...] 侧边栏滚动,参考http://loosky.net/?p=2028; [...]

From 自由的风 on 2011-09-16 21:45:05

那你就查看网页的源代码,根据你自己的结构进行改写。

From 紫云轩 on 2011-10-06 17:27:26

兼容问题。。就像我们测试javascrit调用系统时间的时候,本地测试的时候是好的,但上传服务器就不行了 :arrow:

From 自由的风 on 2011-10-08 15:33:04

@紫云轩 是的,判断有些没有做好! :mrgreen:

From 让侧边栏随滚动条滚动 ¦ 亞瑟の國度 on 2011-10-31 18:10:18

[...] 大 查看评论 最早是在老肥博客上看到这个效果的,他的评论框可以随侧边栏一起滚动,十分人性化,效果如下(自由的风的这篇文章上也有这句话,但这句话不是转载,是真的) [...]

From 河河 on 2011-11-06 11:11:22

技术控呀,支持下

From Demon on 2011-11-06 22:17:45

发现如果使用TAB效果在滚动区域中,TAB效果会失效呢。 :arrow:

From 自由的风 on 2011-11-06 22:24:19

什么滚动区域?

From Demon on 2011-11-07 16:32:38

@Demon 使用这个效果。来让TAB效果随着滚动。但是TAB的切换会失效

From 自由的风 on 2011-11-07 16:53:04

可能是js代码里面有些冲突?

From 自由的风 on 2011-11-08 22:20:09

欢迎来访,谢谢!

From Demon on 2011-11-14 12:17:07

@Demon 这个问题还没有去检查的。

From bin on 2012-01-15 00:47:06

offset.top为空或不是对象, :roll: 不知道哪里写错了

From 自由的风 on 2012-01-15 23:26:45

@bin 代码需要根据你的网页结构进行改写。ID并不一定是一致的。

From mack on 2012-02-03 18:16:55

请问下,这个代码怎么“在主题的js文件中加载”啊?可以详细点么?我有点不会。

From 自由的风 on 2012-02-04 21:55:20

@mack 一般的主题中都有.js为后缀名的文件,你把代码写到那个里面去就可以了。

From mack on 2012-02-05 10:57:13

我的主题里面有好多个.js为后缀名的文件,是不是随便加到哪一个都可以?另外请问下“侧边栏的各个模块加上一些class标志”怎么加?@mack

From 自由的风 on 2012-02-05 11:14:58

你测试一下吧,呵呵。一下子也不好说清楚。 加上一些class标志,这个一般主要是修改sidebar.php中的一些布局。

From 好聪明 on 2012-02-27 16:16:16

喜欢这个效果..就是做不出来 :?:

From 自由的风 on 2012-02-27 23:08:20

什么问题呢?

From wordpress侧边栏随窗口滚动 | 天蝎号 on 2012-04-01 02:27:29

[...] 方法来自@loosky [...]

From 番茄 on 2012-04-08 21:56:09

这个功能不错,我改天有时间也得研究一下。

From wordpress侧边栏指定模块随窗口滚动 | 风吟鸟唱 on 2012-05-12 16:53:18

[...] 因为本站还在整理和规划当中,侧边栏模块还没有定下来,所以本站还没有采用此效果,代码已在本地做个测试。不排除以后会在本站见到此效果。代码来自@自由的风,大家可以去那查看效果。 [...]

From 疯了 on 2012-05-23 16:12:47

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

From 自由的风 on 2012-05-23 21:34:59

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

From 买点儿肉 on 2012-07-06 16:36:40

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

From 自由的风 on 2012-07-09 10:58:00

@买点儿肉 注意class标志和html结构,应该没有问题。 :kbz:

From Wordpress 侧边栏实现随滚动条滑动固定的效果 | 觉唯–Web Design on 2012-09-19 13:55:10

[...] 来源:自由的风博客 给侧边栏的各个模块加上一些class标志,如下图框框里面的内容: [...]

From 重庆网拓 on 2013-03-29 13:47:38

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

From 自由的风 on 2013-03-30 23:11:00

请注意html结构。

From 老蒲 on 2013-03-31 17:54:15

带CLASS的标签必须是DIV么?

From 自由的风 on 2013-04-01 17:30:59

理论上不一定,但我没有测试过。

From » WORDPRESS 侧边栏实现随滚动条滑动固定的效果 月光宝盒-关注互联网 on 2013-04-14 23:12:52

[...] 来源:自由的风博客 给侧边栏的各个模块加上一些class标志,如下图框框里面的内容: [...]

From ericshaw on 2013-05-11 02:48:06

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

From 自由的风 on 2013-05-12 18:51:04

1、要注意你的侧边栏的结构是否跟本文的一致,否则代码中要做一定的修改; 2、rollOut = $('.Meta,.Statistics'); 是要跟随的模块,你可以修改成你对应的模块。

From Capbone on 2013-08-02 19:43:17

问一下,第一步中"给侧边栏的各个模块加上一些class标志" 应该在哪里添加?style.css这个文件里吗?

From 自由的风 on 2013-08-04 22:10:11

模板文件中,如sidebar.php中。

From 李信言 on 2014-01-14 19:14:33

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

From 自由的风 on 2014-01-16 20:18:36

html结构在截图里面已经有了呢。。

Tags: jQuery, PHP, theme, WordPress, 皮肤


©自由的风