貌似这个特效目前很流行，之前也发过一篇《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
这个代码还是会顶着底部滚动的，不可以到某个位置停止滚动吗？
来自外部的引用