側欄跟著滾動的簡單實作程式碼_javascript技巧

瀏覽網站時經常看到有的網站上，側欄裡的有些內容滾動到頁面頂端以後就固定在那個位置，不再跟隨滾動條而滾動。這種效果叫做「側欄跟隨滾動」。它對於那些不希望被滾動到頁面之外的內容是非常有用的。
側欄跟隨滾動的實作方法有很多種，比較常見的有兩種，這兩種方法在NEOEASE寫的一篇文章中介紹的很清楚，一種是藉助jQuery來實現，這種方法對於那些平時不需要載入jQuery函式庫的網站來說，顯然是一種負擔（jQuery現在是越做越大了…）。另外一種方法是透過原生javascript編寫的效果，這種方法相比上一種，要輕盈得多。但是，我還是不夠滿足，原生的javascript寫的文件也有4K多，對於我這種至簡至上的人來說，還是太繁雜了。那麼有沒有更簡單的實作辦法呢？

答案當然是肯定的。下面具體介紹。
先說html檔案（當然也可以是動態文件，裡面總歸有html程式碼的）

複製程式碼

複製程式碼

程式碼如下:

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

然後是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 oiv=document. 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.scrollTdocument; >if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H) "px";}}
else{oDiv.className="div1"; } }; } })(); OK，大功告成，夠簡單吧。 最後給個 範例。