JS实现页面侧边栏浮动跟随，jQuery实现侧边栏跟随浏览器滚动固定显示

效果一：侧边栏固定模块
//侧栏跟随JS，放入header中引用或者放入其他加载的js文件中
(function() {
var oDiv = document.getElementById("float");
var H = 0,
iE6;
var Y = oDiv;
while (Y) {
H += Y.offsetTop;
Y = Y.offsetParent
};
iE6 = window.ActiveXObject && !window.XMLHttpRequest;
if (!iE6) {
window.onscroll = function() {
var s = document.body.scrollTop || document.documentElement.scrollTop;
if (s > H) {
oDiv.className = "div1 div2";
if (iE6) {
oDiv.style.top = (s - H) + "px";
}
} else {
oDiv.className = "div1";
}
};
}
})();
CSS代码：
/*侧栏跟随*/
#box_float {float:left; position:relative; width:250px;}
.div1 {width:250px;}
.div2 {position:fixed; _position:absolute; top:0; z-index:999;}注：样式代码仅为参考，具体的调整，请结合自己的网站调整。
HTML代码：

效果二：侧边栏随窗口滚动（滑动效果）

将上述javascript代码加到主题头部header.php模版中。修改其中的#sidebar为你的主题侧边选择器名称；根据不同的主题头部模版高度，适当调整其中的数字“368”。

效果三：添加侧边栏随滚动条滚动效果（无滑动）
如果你的侧边栏之前已经有了这些class标志加以区分，只要使用就可以了，不用另外加。
否则需要给侧边栏的各个模块加上一些class标志，如下图框框里面的内容：
在主题的js文件中加上如下代码：
var rollStart = $('.Statistics'), //滚动到.Statistics区块的时候开始随动
rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块
rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块
rollStart.before('

');
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);
}
});
注：滚动区域的内容不能太长，不然会出现无限下拉的情况。

直接用代码一：
如果嫌引用代码还不够方便，并且想尽可能的给页面“减负”，也可以使用如下代码：
$(function () {
if ($(".fixed_side").length > 0) {
var offset = $(".fixed_side").offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
//如果距离顶部的距离小于浏览器滚动的距离，则添加fixed属性。
if (offset.top < scrollTop) $(".fixed_side").addClass("fixed"); //否则清除fixed的css属性 else $(".fixed_side").removeClass("fixed"); }); } });
CSS如下：
.fixed{position:fixed; top:20px; width:250px;}

直接用代码二：
另外还有带滑动效果的侧边栏随窗口滚动jQuery代码：
修改下面的#sidebar 为你网站侧边栏选择器名称即可。