貌似这个特效目前很流行，之前也发过一篇《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主题的）。
个人认为，网页加上这个特效后，侧边模块在眼前晃晃悠悠的，并不是很舒服，适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱，大家接着折腾吧。
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
海南省海口市 51F
能让边栏固定跟随移动吗？
福建省莆田市 52F
能让边栏固定跟随移
广东省湛江市 53F
这个有点烦感觉
浙江省温州市 54F
一直在找这样的东西
韩国 55F
看来想让博客变得更完美还得捣腾啊。努力实现各种特效。
新疆和田地区皮山县 56F
使用header 怎么样改变 哪个代码呢？？
福建省泉州市 57F
主题侧边选择器名称是什么呢
四川省成都市 58F
这个不错，但是必须用到jquery.min.js
和一些必须用到jquery.js的插件冲突了fancy-box….
广西防城港市 59F
终于找到了，多谢博主分享
四川省成都市 60F
此功能还算不错的，能够写成插件就好啦
山东省淄博市 61F
感谢知更鸟大师
河南省南阳市 62F
先试试才，借鉴借鉴下，请问博主是您现在侧边栏的这个效果吗?
浙江省杭州市建德市 63F
文章中也说这个效果会晃晃悠悠的，但你的网站边栏随窗口就没有，请问什么原因？
山西省太原市 64F
能帮我看下我的想让 右侧五个图标跟随，为什么就是不能啊 好像id=text-4
北京市 65F
代码加进去，怎么不显示呢，是不是跟主题有关系呢。
湖北省十堰市 66F
奇怪，我刚才博客添加这个代码之后却不显示，是不是侧边栏选择器的名称写错了呢，继续折腾当中……………
广东省深圳市 67F
这样弄岂不是和HTML5的性质有点类似了？ 不过貌似不利于SEO优化。
福建省泉州市 68F
【主题侧边选择器名称】是什么东西，用firebug找半天没找到……
江苏省南京市 69F
我用了这个代码，发现是慢腾腾的下来，并不是你网站的这种效果，请博主看看
江苏省盐城市 70F
广东省珠海市 71F
请问能不能更新下，你现在的这个边栏是怎样实现的吗？谢谢
广东省广州市 B1
@ 深蓝 非常不错！！！！
（299元这个广告的边栏）先固定不动，然后在拉下来的时候显现。
同求现在这个侧边栏是怎么实现的？
河南省郑州市 72F
这个代码还是会顶着底部滚动的，不可以到某个位置停止滚动吗？
来自外部的引用