部落格側邊欄模組跟隨捲軸滑動固定效果的實作方法(js jquery等)_javascript技巧

當一個頁面內容很長的時候，側邊欄欄可能顯得太短，當視窗滑動到靠下的位置，則側邊即失去了展示內容的機會。許多新聞資訊類網站如新浪、網易、CSDN等，會在邊欄的右下角以固定的小彈窗形式，以提供更多的內容展示方式，但這並不適合部落格和web2.0風格的網站。

現在許多的獨立部落格和網站如人人網等，都使用了讓側邊欄模組隨捲軸滑動而位置固定的效果。就是當一個頁面很長的時候，設定側欄內容會跟隨滾動條，這種效果適用於評論較多、內容較長的網站。志文工作室研究了幾種類似功能的實現方法，摘錄以供參考。

參考一、提高瀏覽量的特效：側邊欄跟隨捲軸

資料來源：盧鬆鬆部落格
http://lusongsong.com/reed/453.html

程式碼如下：

CSS部分：

複製程式碼 程式碼如下:

/側欄跟隨/  
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolutetop:0; -index:250;}

註：每個網站的側欄寬度不同，可依你網頁的寬度調整div1的寬度，我的是width:250px;，把這段程式碼加入你的CSS檔案中即可。

JS部分：

JavaScript程式碼

複製程式碼 程式碼如下:

(function(){   

    var oDiv=document.getElementById("float");   
    var H=0,iE6; (Y){H =Y .offsetTop;Y=Y.offsetParent};   
    iE6=window.ActiveXObject&&!window.XMLHttpRequest;   
 tion()   
        {   
            var s=document.body.scrollTop||document.documentElement.scrollTop;   
            if(s>H){oDiv.className="div1 div2"; ";}}   
            else{oDiv.className="div1";}       

註：這段程式碼可放入任意JS檔案中，例如我放在了util.js 檔案裡。

網頁程式碼部分：




複製程式碼

程式碼如下:

  

     這裡寫你網站的程式碼與標籤   

  

  

     

註：這裡可以放文章清單、聯盟廣告，總之是個提高點擊率的好方法。 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('

');   
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();   
objWindow.scrollStart.prev();   
objWindow.scrollStart. (function() {   
if (objWindow.scrollTop() > offset.top){   
if(rollBox.html(null)){   
rollSet.clone().prerollpend(). ;   
}   
rollOut.fadeOut();   
rollBox.show().stop().animate({top:0,paddingTop:10},400). >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 = $("""""""",), (window),   
  offset = $sidebar.offset(),   
  topPadding = 0;   
  $window.scroll(function() {   
  $window.scroll(function() {   
  $window.scroll(function() {   
  $window.scroll(function() {   . ) {   
    $sidebar.stop().animate({   
     marginTop: $window.scrollTop() - offset.top topding  );   
    $sidebar.stop ().animate({   
     marginTop: 0   
    });