js監聽捲軸滾動事件使得某個標籤內容始終位於同一位置

 js如何監聽捲軸滾動事件，使得某個標籤內容始終位於同一位置，下面有個不錯的樣本，大家可以參考下

小知識點，廢話不多說，直接上代碼  css：  代碼如下:<pre name="code" class="css"><style> #anchor:{ position:absulate; top:40%; left:40%; width:100px; height:100px; background-color:red; } </style></pre><br>  js: 代碼如下:<pre name="code" class="javascript">var auchorTop = $("#anchor").css("top"); auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf("p"))); //首先在監聽器外部記錄某id=anchor的標籤的初始位置 window.onscroll = function () { var top = document.documentElement.scrollTop || document.body.scrollTop; $("#anchor").css("top", anchorTop + top + "px"); };</pre>  html: 代碼如下:<div id="anchor"></div>  在window.onscroll上即可添加捲軸滾動事件，在監聽函數中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以這麼寫，就是避免不同瀏覽器的相容性，這裡我測試了chrom和ff瀏覽器，前者支援document.body.scrollTop這個屬性，後者支援另一個屬性，因此可以用‘||'符號糅合這兩個屬性，相容不同瀏覽器。anchorTop就是目標的開始與瀏覽器頂部的距離，這裡還需要注意的是'#anchor‘這個標籤的position：absulate，否則top屬性值總是是0px。  當捲軸滾動時，top值變化，隨後將'#anchor'的初始top值加上捲軸的top值，即可保持內容始終處於同一位置。