WordPress主题侧边栏随窗口滚动

摘要

貌似这个特效目前很流行，之前也发过一篇《jQuery实现侧边栏随窗口滚动》的教程，不过有童鞋发现加上这个JS特效后，侧边栏会顶着页脚无限滚下去，那就在发一个比较完美的。
修改其中的“#sidebar”为你的主题侧边选择器名称；根据不同的主题头部模版高度，适当调整其中的数字“368”（默认数字为HotNews主题的）。

网页加上这个特效后，侧边模块在眼前晃晃悠悠的，并不是很舒服，适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱，大家接着折腾吧。

貌似这个特效目前很流行，之前也发过一篇《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主题的）。

个人认为，网页加上这个特效后，侧边模块在眼前晃晃悠悠的，并不是很舒服，适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱，大家接着折腾吧。

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人，一两天看不出任何区别；一两个月看来差异也是微乎其微的；但在2-5年的长远时间来看的时候，你的高质量询盘不断增加，你的互联网资产已经建立完成，对手已经很难匹敌，现在你看到这段文字的时候就是最好的开始，现在就是最好的时候，马上开始“1+N”体系的整体互联网推广吧，我们和你一起，开创互联网大未来！

博客&文章

WordPress主题侧边栏随窗口滚动

相关文章

写给所有做网站的朋友的一封信

准备开启WordPress网站建设推广？

关于

服务

主题

帮助

搜索您关心的