貌似这个特效目前很流行，之前也发过一篇《jQuery实现侧边栏随窗口滚动》的教程，不过有童鞋发现加上这个JS特效后，侧边栏会顶着页脚无限滚下去，那就再发一个比较完美的，上代码：
- <script type="text/javascript">
- var documentHeight = 0;
- var topPadding = 15;
- $(function() {
- var offset = $("#sidebar").offset();
- documentHeight = $(document).height();
- $(window).scroll(function() {
- var sideBarHeight = $("#sidebar").height();
- if ($(window).scrollTop() > offset.top) {
- var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
- var maxPosition = documentHeight - (sideBarHeight + 368);
- if (newPosition > maxPosition) {
- newPosition = maxPosition;
- }
- $("#sidebar").stop().animate({
- marginTop: newPosition
- });
- } else {
- $("#sidebar").stop().animate({
- marginTop: 0
- });
- };
- });
- });
- </script>
将上述javascript代码加到主题头部header.php模版中。
修改其中的“#sidebar”为你的主题侧边选择器名称；
根据不同的主题头部模版高度，适当调整其中的数字“368”（默认数字为HotNews主题的）。
个人认为，网页加上这个特效后，侧边模块在眼前晃晃悠悠的，并不是很舒服，适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱，大家接着折腾吧。
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
1F
呵呵，第一次沙发，鸟哥好久没更新了
2F
移到顶部有错位
B1
@ 眼幕微启 呵呵，刚刚我只是在测试而已，很完美的滚动特效
最近业余时间较少，没时间折腾了
3F
有一个版本的不会晃 是固定的
B1
@ 倡萌 请教一下 不会晃的版本在哪里有啊 一直想要那个效果
B1
@ 倡萌 同求….
B1
@ 倡萌 我用的你提供的办法，不过，加载图片广告没事，加载动态广告时总是不断重新加载，不知道是哪里出了问题，还望指教。
4F
如何实现瀑布效果？
5F
http://kailiwuang.net
麻烦鸟哥去看看啊，为什么我的视频 图片标签打开的页面总是错位的呢？？
怎么解决啊 ？？
还有就是首页视频横向滚动去掉下面的标题后，高度变小一点？
谢谢
6F
哇塞，等的就是是这个啦
7F
还是原来的好，虽然有BUG
8F
不喜欢这样的效果。 呵呵
9F
回头测试一下，看看到底好不好用。
10F
很不错的效果。
11F
刚在主题上试了下，效果还不错的，谢谢了
12F
多谢鸟哥，但是用了这个新代码后，还是不行，依旧底部页面无限往下顶，368这个数字我也改了，改成0，100，200，500，900都不行。。。
ps:wopus的追问功能貌似无效了。。
B1
@ 猫理会会长 我也是啊，还是会无限下顶！！！怎么让他滑到某一div时停止滑动呢？
13F
不错，多谢分享。
14F
呵呵，过来踩踩。
15F
有时这功能必不可少
16F
这个代码比较好 多谢啦
17F
鸟哥，侧边栏的那个最活跃读者是按评论数量从高往低排列的对吧，这个怎么改一下以名字和数量排列啊？现在是头像排列的。我找了sidebar没有看到哦。谢谢了
B1
@ 骷髅猫 应该在top_comment.php里修改，你试试看
18F
这个不太需要了了，哎！一直没有弄成功过~~
19F
问一个问题，为什么图片不能显示呢
20F
鸟哥啊，我的内页侧边栏小工具为何显示不了呢。拖了好几个工具到全部页面里。死活就是不显示的。。
21F
wordpress如何用自定义栏目为文章添加缩略图？
鸟哥你好，请教个问题啊，我用的是鸟哥的模板，在模板说明到缩略图时有这么一条：“添加自定义栏目，调用指定的图片，推荐此方法。”
我想问
1.如何添加自定义栏目？
2.这种方法怎么用？怎么操作才能调用到图片？
知道的朋友也可以告诉下我啊，谢谢了！！
B1
@ hello 主题使用说明中已写
B2
@ 知更鸟 那个 “添加自定义栏目，好像控制面板没有这个选项啊，后台在哪里操作啊？
B3
@ hello 后台写文章那里，右上角有个显示选项，点它，勾选自定义栏目后，在编辑区域下面就有了！
B4
@ 孤风 这个值填什么呢？比如说我想指定的文章对应固定的图片，不要让图片随即的显示，怎么操作呢？谢谢
22F
还有那个 底部那个小喇叭 的微博 和订阅在哪里改动成自己的呢？
23F
效果不错。很久没来了。你更新的也慢了啊。
24F
哈哈哈哈哈
B1
@ 45454546 请教个问题啊，我用的是鸟哥的模板，在模板说明到缩略图时有这么一条：“添加自定义栏目，调用指定的图片，推荐此方法。”
我想问
1.如何添加自定义栏目？
2.这种方法怎么用？怎么操作才能调用到图片？
知道的朋友也可以告诉下我啊，谢谢了！！
自定义栏目添加中，这个值填什么呢？比如说我想指定的文章对应固定的图片，不要让图片随即的显示，怎么操作呢？谢谢
25F
鸟哥，PR更新了
B1
@ Win7en乐园 PR5了，你的4了
B2
@ Tmd 嗯，是呀，不过为毛人家上线7天的新站这次更新直接变4了？
B3
@ Win7en乐园 可能人品好呗
PR还真没重视过- –
B4
@ Tmd 哦，你的头像很三俗呀
26F
学习了 很好的文章
27F
学习了，支持鸟哥
28F
我正想找这个代码呢，呵呵
B1
@ 家用制氧机 请教个问题啊，我用的是鸟哥的模板，在模板说明到缩略图时有这么一条：“添加自定义栏目，调用指定的图片，推荐此方法。”
我想问
1.如何添加自定义栏目？
2.这种方法怎么用？怎么操作才能调用到图片？
知道的朋友也可以告诉下我啊，谢谢了！！
自定义栏目添加中，这个值填什么呢？比如说我想指定的文章对应固定的图片，不要让图片随即的显示，怎么操作呢？谢谢
提交成功,刷新页面之前你可以
29F
问个问题
页面下的友情链接，能不能只选择显示一个链接分类目录？
B1
@ 三水 主题已预留了该功能，打开footer模版查找“&category=”在后面加上链接分类ID
B2
@ 知更鸟 太感谢了，太给力了！
还有个小疑问，友情链接可以加nofollow吗
B3
@ 三水 可以，链接编辑页在“链接关系网”关系（rel）中添加nofollow
B4
@ 知更鸟 大哥，是在下面的“备注”中加上rel=”nofollow”吗？
关系（rel），不能写什么，只能选择是，同事、朋友等等啊。不能直接写rel=”nofollow”啊
B2
@ 知更鸟 鸟哥果然细心！
30F
很好的文章。
31F
不错，值得借鉴。
32F
对这种效果没兴趣
33F
备用了 很不错
34F
效果很好不错的
35F
鸟哥，你右侧的那个“返回顶部”的代码可以不可以共享下哦。
36F
鸟哥，我的网站ID太多，网页显示不过来[img]http://www.ttshare.com/wp-admin/themes.php?page=theme_options.php[/img]
37F
学习了，看来我还是太嫩！
38F
这，，，效果好看不~~
39F
这个特效很不错，我也要试试
40F
萝卜青菜，各有所爱吧
41F
博主有时间把首页的那个图片也改成自动滚动的吧。我研究了一晚上也，改了没有反应，也不知道哪里弄错了。
42F
你好我用了你的主题 ，，，多谢谢你。。
这个主题小工具没显示首页[img]http://uchqun.com/1.jpg[/img]
[img]http://uchqun.com/2.jpg[/img]
43F
帮我修改一下吧。。。打扰你了
B1
@ ئۇچقۇن 请帮我。。。
44F
嗯，虽然博主说的慌得难受点，不过确实是个不错的方法，可能会方便一些客户
45F
代码看不懂，但是复制过来还是能用的。谢谢了。
46F
请问如果我想让右侧最下面一个小工具一直跟随到页面最底部，而不是从上面的小工具跟随到下面。要如何实现 ？ 意思就是说，有时候文章太长了，到了文章后部分的时候左侧就没有小工具了，就是空白区域，我想让左侧的最下面的小工具跟随下来，这样就不会有空白区域了，该如何实现呢 ？
B1
@ Jason 只想滚动最下面的小工具那是不可能的，因为无法单独选择某个小工具DIV,唯一的方法是自己修改模版，在侧边加一个特殊的固定模块，之后选择这个模块滚动….
47F
看到过，准备给自己博客弄一个，话说这个主题用的人很多啊。
48F
关于这个功能今天一定要来吐一下槽，从下午发表了一篇比较长的文章后就开始折腾，一直到现在凌晨一点才实现跟随滚动，一般js代码都是放在与标签之间，但这个放在与之间死活实现不了，开始以为可能是我右侧太长了所以无效，于是在网上去找啊，试了好几种代码都是没有。期间发现不少就是直接从鸟哥这里copy的，连代码之外的字都一模一样，呵呵。后来看到你之前一篇《jQuery实现侧边栏随窗口滚动
》第28楼的回复，去他的站去看，里面有一句话“步骤二：将如下代码添加到顶部模版的后：”，心想难道是我代码放在之前了所以才无效吗，立马把鸟哥的代码换到后，上传刷新，哦耶，终于搞定~~~~~总共花了八九个小时，结果就一个代码位置放错。。。哎。。。不过加上这个效果阅读的时候确实很晃眼。http://www.xptt.com/to-roll-up-your-sidebar.html/comment-page-1鸟哥，像这个页面上把热门标签和随机文章给单独拉出来，而且不是跟着滚动是固定在那是怎么实现的呢？他这个上面放出的代码也是整个sidebar一起跟着滚动的，跟他自己用的不一样。我现在网站上是用他的这个在进行测试。因为我们这个hotnews主题是直接调用后台的小工具集，那怎么去单独选择其中一个或几个模块的ID呢？自己实在想不出辙了，只好在这里向你请教了。
49F
我喜欢这样的功能
50F
能让边栏固定跟随移动吗？
51F
能让边栏固定跟随移
52F
这个有点烦感觉
53F
一直在找这样的东西
54F
看来想让博客变得更完美还得捣腾啊。努力实现各种特效。
55F
使用header 怎么样改变 哪个代码呢？？
56F
主题侧边选择器名称是什么呢
57F
这个不错，但是必须用到jquery.min.js
和一些必须用到jquery.js的插件冲突了fancy-box….
58F
终于找到了，多谢博主分享
59F
此功能还算不错的，能够写成插件就好啦
60F
感谢知更鸟大师
61F
先试试才，借鉴借鉴下，请问博主是您现在侧边栏的这个效果吗?
62F
文章中也说这个效果会晃晃悠悠的，但你的网站边栏随窗口就没有，请问什么原因？
63F
能帮我看下我的想让 右侧五个图标跟随，为什么就是不能啊 好像id=text-4
64F
代码加进去，怎么不显示呢，是不是跟主题有关系呢。
65F
奇怪，我刚才博客添加这个代码之后却不显示，是不是侧边栏选择器的名称写错了呢，继续折腾当中……………
66F
这样弄岂不是和HTML5的性质有点类似了？ 不过貌似不利于SEO优化。
67F
【主题侧边选择器名称】是什么东西，用firebug找半天没找到……
68F
我用了这个代码，发现是慢腾腾的下来，并不是你网站的这种效果，请博主看看
69F
70F
请问能不能更新下，你现在的这个边栏是怎样实现的吗？谢谢
B1
@ 深蓝 非常不错！！！！
（299元这个广告的边栏）先固定不动，然后在拉下来的时候显现。
同求现在这个侧边栏是怎么实现的？
71F
这个代码还是会顶着底部滚动的，不可以到某个位置停止滚动吗？
来自外部的引用