最近在一些博客看到側邊欄某些板塊，隨着滾動條的滑動，而跟着滑動或者固定的效果，感覺非常的人性化，一來可以彌補當一個頁面很長，但側邊欄太短的 時候的空白，二來可以合理利用空間展示更多信息，可以大大的提高曝光率和點擊率。這樣子的效果很適合於文章的列表（比如月度排行、熱門文章之類的），還有 適合於廣告聯盟的展示。所以去網上找了一些資料，整理了一下，現在分享給大家，也方便以后自己查閱，希望對大家有用。
效果一：側邊欄固定模塊
來源：盧松松博客
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";
}
};
}
})();
注：為了減少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代碼：
<div id="box_float"> <div id="float" class="div1"> 這里寫你網站的代碼與標簽 </div> </div>
注：這里可以放文章列表、聯盟廣告，總之是個提高點擊率的好方法。wordpress用戶把此段代碼添加到sidebar.php的側欄位置即可。
特別提示：此代碼試用與任何CMS系統，但該特效在IE6下無法實現，其余瀏覽器均沒問題，同時側欄其余部分應使用靜態文件調用，使用JS調用欄目會出現代碼重疊現象，調用聯盟廣告沒問題。
效果二：側邊欄隨窗口滾動（滑動效果）
來源：知更鳥
實現這個隨窗口滾動效果，首先主題必須加載jQuery。已經完美解決側邊欄會頂着頁腳無限滾下去的bug，一起看看代碼：
<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”。
效果三：添加側邊欄隨滾動條滾動效果（無滑動）
來源：自由的風博客
給側邊欄的各個模塊加上一些class標志，如下圖框框里面的內容：
如果你的側邊欄之前已經有了這些class標志加以區分，只要使用就可以了，不用另外加。
在主題的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);
}
});
注：滾動區域的內容不能太長，不然會出現無限下拉的情況。
效果四：JQUERY SCROLL FOLLOW
這是一個插件，添加步驟很簡單，操作簡單就是使用插件的好處，下載壓縮包解壓到網站目錄，然后按照步驟操作即可。但個人不推薦插件，能用代碼實現的效果，就不用插件。插件下載地址： http://kitchen.net-perspective.com/open-source/scroll-follow/
示例頁面：
http://kitchen.net-perspective.com/sf-example-1.html
http://kitchen.net-perspective.com/sf-example-2.html
http://kitchen.net-perspective.com/sf-example-3.html
http://kitchen.net-perspective.com/sf-example-4.html