js監聽滾動條滾動事件使得某個標籤內容始終位於同一位置_javascript技巧

小知識點，廢話不多說，直接上程式碼

css：

複製程式碼 程式碼如下:

<style> <BR>#anchor:{ <BR>position:absulate; <BR>top:40%; <BR>left :40%; <BR>width:100px; <BR>height:100px; <BR>background-color:red; <BR>} <BR></style>

}

}
}
}

js:




複製程式碼

程式碼如下:

var auchorTop = $("#anchor").css("top"); <u>auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf("p"))); / /首先在監聽器外部記錄某id=anchor的標籤的初始位置</u>window.onscroll = function () { 

var top = document.documentElement.scrollTop || document.body.scrollTop; $ ("#anchor").css("top", anchorTop top "px");

};

html:

複製程式碼 程式碼如下:

在window.onscroll上即可加入捲軸滾動事件，在監聽函數中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以這麼寫，就是避免不同瀏覽器的兼容性，這裡我測試了chrom和ff瀏覽器，前者支援document.body.scrollTop這個屬性，後者支援另一個屬性，因此可以用'||'符號糅合這兩個屬性，相容於不同瀏覽器。 anchorTop就是目標的開始與瀏覽器頂部的距離，這裡還要注意的是'#anchor‘這個標籤的position：absulate，否則top屬性值總是0px。 當捲軸滾動時，top值變化，隨後將'#anchor'的初始top值加上捲軸的top值，即可保持內容始終處於同一位置。