當一個頁面內容很長的時候，側邊欄欄目可能顯得太短，當窗口滑動到靠下的位置，則側邊即失去了展示內容的機會。很多新聞資訊類網站如新浪、網易、CSDN等，會在邊欄的右下角以固定的小彈窗形式，以提供更多的內容展示方式，但這並不適合博客和web2.0風格的網站。
現在很多的獨立博客和網站如人人網等，都使用了讓側邊欄模塊隨滾動條滑動而位置固定的效果。就是當一個頁面很長的時候，設定側欄內容會跟隨滾動條，這種效果適用於評論較多、內容較長的網站。志文工作室調研了幾種類似功能的實現方法，摘錄之以供參考。
參考一、提高浏覽量的特效：側欄跟隨滾動條
來源：盧松松博客
http://lusongsong.com/reed/453.html
代碼如下：
CSS部分：
復制代碼 代碼如下:
/*側欄跟隨*/
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
注：每個網站的側欄寬度不同，可根據你網頁的寬度調整div1的寬度，我的是width:250px;，把這段代碼添加到你的CSS文件中即可。
JS部分：
JavaScript代碼
復制代碼 代碼如下:
//側欄跟隨
(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文件中，比如我放在了util.js 文件裡。
網頁代碼部分：
復制代碼 代碼如下:
<div id="box">
<div id="float" class="div1">
這裡寫你網站的代碼與標簽
</div>
</div>
注：這裡可以放文章列表、聯盟廣告，總之是個提高點擊率的好方法。Z-blog用戶把此段代碼添加到single.html的側欄位置即可。
特別提示：此代碼試用與任何CMS系統，但該特效在IE6下無法實現，其余浏覽器均沒問題，同時側欄其余部分應使用靜態文件調用，使用JS調用欄目會出現代碼重疊現象，調用聯盟廣告沒問題。
參考二、添加側邊欄隨滾動條滾動效果（示例）
來源：自由的風博客（http://loosky.net/?p=2028）
步驟如下：
1、給側邊欄的各個模塊加上一些class標志
如果你的側邊欄之前已經有了這些class標志加以區分，只要使用就可以了，不用另外加。添加ID也可以實現效果，但w3c標准不允許同一頁面出現多個同樣的ID，所以最好用class樣式方式。
2、在網站頁面中的任意js文件中加上如下代碼：
JavaScript代碼
復制代碼 代碼如下:
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
側欄模塊隨窗口滑動（示例頁面）
來源：http://www.mb-wx.com/common/msay.js
這段代碼來自木本無心的博客（pjblog），原理很簡單，就是當窗口到達指定模塊位置後，開始判斷其距離頂端的距離並進行調整。該段代碼結合應用在了志文工作室博客側邊欄。
JavaScript代碼
復制代碼 代碼如下:
//側欄模塊隨窗口滑動
jQuery(document).ready(function($) {
$(function() {
var $sidebar = $("#Side_relativelog"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
});