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