最近在一些博客看到侧边栏某些板块，随着滚动条的滑动，而跟着滑动或者固定的效果，感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的
时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的)，还有
适合于广告联盟的展示。所以去网上找了一些资料，整理了一下，现在分享给大家，也方便以后自己查阅，希望对大家有用。
效果一：侧边栏固定模块
Js代码//侧栏跟随
(function(){
varoDiv=document.getElementById("float");
varH=0,
iE6;
varY=oDiv;
while(Y){
H+=Y.offsetTop;
Y=Y.offsetParent
};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function(){
vars=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){
oDiv.className="div1div2";
if(iE6){
oDiv.style.top=(s-H)+"px";
}
}else{
oDiv.className="div1";
}
};
}
})();
注：为了减少js文件引用，这段代码可放入任意JS文件中
CSS代码：/*侧栏跟随*/
#box_float{float:left;position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:999;}
注：样式代码仅为参考，具体的调整，请结合自己的网站调整。
HTML代码：
这里写你网站的代码与标签
注：这里可以放文章列表、联盟广告，总之是个提高点击率的好方法。wordpress用户把此段代码添加到sidebar.php的侧栏位置即可。
特别提示：此代码试用与任何CMS系统，但该特效在IE6下无法实现，其余浏览器均没问题，同时侧栏其余部分应使用静态文件调用，使用JS调用栏目会出现代码重叠现象，调用联盟广告没问题。
效果二：侧边栏随窗口滚动(滑动效果)
来源：知更鸟
实现这个随窗口滚动效果，首先主题必须加载jQuery。已经完美解决侧边栏会顶着页脚无限滚下去的bug，一起看看代码：
vardocumentHeight=0;
vartopPadding=15;
$(function(){
varoffset=$("#sidebar").offset();
documentHeight=$(document).height();
$(window).scroll(function(){
varsideBarHeight=$("#sidebar").height();
if($(window).scrollTop()>offset.top){
varnewPosition=($(window).scrollTop()-offset.top)+topPadding;
varmaxPosition=documentHeight-(sideBarHeight+368);
if(newPosition>maxPosition){
newPosition=maxPosition;
}
$("#sidebar").stop().animate({
marginTop:newPosition
});
}else{
$("#sidebar").stop().animate({
marginTop:0
});
};
});
});
将上述javascript代码加到主题头部header.php模版中。修改其中的#sidebar为你的主题侧边选择器名称；根据不同的主题头部模版高度，适当调整其中的数字“368”。
效果三：添加侧边栏随滚动条滚动效果(无滑动)
来源：自由的风博客
给侧边栏的各个模块加上一些class标志，如下图框框里面的内容：
如果你的侧边栏之前已经有了这些class标志加以区分，只要使用就可以了，不用另外加。
在主题的js文件中加上如下代码：varrollStart=$('.Statistics'),//滚动到此区块的时候开始随动
rollOut=$('.WidgetMeta,.Statistics');//隐藏rollStart之后的区块
rollSet=$('.RRPosts,.TagsCloud');//添加rollStart之前的随动区块
rollStart.before('
varoffset=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);
}
});
注：滚动区域的内容不能太长，不然会出现无限下拉的情况。
效果四：JQUERY SCROLL FOLLOW这是一个插件，添加步骤很简单，操作简单就是使用插件的好处，下载压缩包解压到网站目录，然后按照步骤操作即可。但个人不推荐插件，能用代码实现的效果，就不用插件。
插件下载地址：-/open-source/scroll-follow/
示例页面：
-/sf-example-1.html
-/sf-example-2.html
-/sf-example-3.html
-/sf-example-4.html
