快捷導(dǎo)航

博客側(cè)邊欄模塊跟隨滾動條滑動固定效果的實現(xiàn)方法(js+jquery等)

更新時間：2013年03月24日 21:49:35 作者：

現(xiàn)在很多的獨立博客和網(wǎng)站如人人網(wǎng)等，都使用了讓側(cè)邊欄模塊隨滾動條滑動而位置固定的效果

當(dāng)一個頁面內(nèi)容很長的時候，側(cè)邊欄欄目可能顯得太短，當(dāng)窗口滑動到靠下的位置，則側(cè)邊即失去了展示內(nèi)容的機會。很多新聞資訊類網(wǎng)站如新浪、網(wǎng)易、CSDN等，會在邊欄的右下角以固定的小彈窗形式，以提供更多的內(nèi)容展示方式，但這并不適合博客和web2.0風(fēng)格的網(wǎng)站。

現(xiàn)在很多的獨立博客和網(wǎng)站如人人網(wǎng)等，都使用了讓側(cè)邊欄模塊隨滾動條滑動而位置固定的效果。就是當(dāng)一個頁面很長的時候，設(shè)定側(cè)欄內(nèi)容會跟隨滾動條，這種效果適用于評論較多、內(nèi)容較長的網(wǎng)站。志文工作室調(diào)研了幾種類似功能的實現(xiàn)方法，摘錄之以供參考。

參考一、提高瀏覽量的特效：側(cè)欄跟隨滾動條

來源：盧松松博客
http://lusongsong.com/reed/453.html

代碼如下：

CSS部分：

復(fù)制代碼代碼如下:

/*側(cè)欄跟隨*/   
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}

注：每個網(wǎng)站的側(cè)欄寬度不同，可根據(jù)你網(wǎng)頁的寬度調(diào)整div1的寬度，我的是width:250px;，把這段代碼添加到你的CSS文件中即可。

JS部分：

JavaScript代碼

復(fù)制代碼代碼如下:

//側(cè)欄跟隨    
(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 文件里。

網(wǎng)頁代碼部分：

復(fù)制代碼代碼如下:

<div id="box">   
<div id="float" class="div1">     
這里寫你網(wǎng)站的代碼與標(biāo)簽    
</div>   
</div>   

注：這里可以放文章列表、聯(lián)盟廣告，總之是個提高點擊率的好方法。Z-blog用戶把此段代碼添加到single.html的側(cè)欄位置即可。

特別提示：此代碼試用與任何CMS系統(tǒng)，但該特效在IE6下無法實現(xiàn)，其余瀏覽器均沒問題，同時側(cè)欄其余部分應(yīng)使用靜態(tài)文件調(diào)用，使用JS調(diào)用欄目會出現(xiàn)代碼重疊現(xiàn)象，調(diào)用聯(lián)盟廣告沒問題。

參考二、添加側(cè)邊欄隨滾動條滾動效果（示例）

來源：自由的風(fēng)博客（http://loosky.net/?p=2028）

步驟如下：

1、給側(cè)邊欄的各個模塊加上一些class標(biāo)志
如果你的側(cè)邊欄之前已經(jīng)有了這些class標(biāo)志加以區(qū)分，只要使用就可以了，不用另外加。添加ID也可以實現(xiàn)效果，但w3c標(biāo)準不允許同一頁面出現(xiàn)多個同樣的ID，所以最好用class樣式方式。

2、在網(wǎng)站頁面中的任意js文件中加上如下代碼：

JavaScript代碼

復(fù)制代碼代碼如下:

var rollStart = $('.Statistics'), //滾動到此區(qū)塊的時候開始隨動    
rollOut = $('.WidgetMeta,.Statistics'); //隱藏rollStart之后的區(qū)塊    
rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的隨動區(qū)塊    

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);    
}    
});   

注：滾動區(qū)域的內(nèi)容不能太長，不然會出現(xiàn)無限下拉的情況。

參考三、JQUERY SCROLL FOLLOW

這是一個插件，添加步驟也很簡單，下載壓縮包解壓到網(wǎng)站目錄，然后按照步驟操作即可。
詳細可參考：
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

側(cè)欄模塊隨窗口滑動（示例頁面）
來源：http://www.mb-wx.com/common/msay.js
這段代碼來自木本無心的博客（pjblog），原理很簡單，就是當(dāng)窗口到達指定模塊位置后，開始判斷其距離頂端的距離并進行調(diào)整。該段代碼結(jié)合應(yīng)用在了志文工作室博客側(cè)邊欄。

JavaScript代碼

復(fù)制代碼代碼如下:

//側(cè)欄模塊隨窗口滑動    
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    
    });    
   }    
  });    
 });    
});  