側欄跟隨滾動的簡單實現代碼

瀏覽網站時經常看到有的網站上，側欄裡的有些內容滾動到頁面頂端以後就固定在那個位置，不再跟隨捲軸而滾動。這種效果叫做“側欄跟隨滾動”。它對於那些不希望被滾動到頁面之外的內容是非常有用的。
側欄跟隨滾動的實現方法有很多種，比較常見的有兩種，這兩種方法在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，大功告成，夠簡單吧。
最後給個 樣本。