北极寒流 » 网络资源 » wordpress侧边栏(sidebar)随滚动条滚动效果 - 2012.03.24

wordpress侧边栏(sidebar)随滚动条滚动效果

wordpress侧边栏(sidebar)随滚动条滚动效果可能大家在很多网站上都看过,就是当网页比较长的时候,侧边栏部分模块可以随着滚动条的滚动而滚动。这样当文章或页面的内容比较长的时候,我们就可以在侧边栏显示一些内容,免得给人以左右不平衡的感觉。

步骤如下:

1、首先确定你侧边栏的各个模块都有一些class标志,如下图框框里面的内容(没有的话请仔细增加class标志):
sidebar

把下面的代码存为js,挂载在你主题上即可

var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动
rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块
rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块
rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');
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);
}
});

需要注意的就是那几个注释地方前面的class要与你主题的想对应。而且最好滚动区域的内容不能太长,不然会出现无限下拉的情况。

参考来源:http://loosky.net/?p=2028

24

wordpress侧边栏(sidebar)随滚动条滚动效果

分享到: