側欄跟隨滾動的一種簡單實現

瀏覽網站時經常看到有的網站上，側欄里的有些內容滾動到頁面頂端以后就固定在那個位置，不再跟隨滾動條而滾動。這種效果叫做“側欄跟隨滾動”。它對於那些不希望被滾動到頁面之外的內容是非常有用的。

側欄跟隨滾動的實現方法有很多種，比較常見的有兩種，這兩種方法在NEOEASE寫的一篇文章中介紹的很清楚，一種是借助jQuery來實現，這種方法對於那些平時不需要加載jQuery庫的網站來說，顯然是一種負擔（jQuery現在是越做越大了……）。另外一種方法是通過原生javascript編寫的效果，這種方法相比上一種，要輕盈得多。但是，我還是不夠滿足，原生的javascript寫的文件也有4K多，對於我這種至簡至上的人來說，還是太繁雜了。那么有沒有更簡單的實現辦法呢？

答案當然是肯定的。下面具體介紹。

先說html文件（當然也可是動態文件，里面總歸有html代碼的）

<div id="box">
<div id="float" class="div1"> 

在這里加入需要跟隨滾動的內容

</div>
</div>

然后是CSS代碼

#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}

最后是JS代碼（可以放在需要滾動的頁面中，也可以放在單獨的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";}    
       };
   }

})();

OK，大功告成，夠簡單吧。

最后給個 示例。