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值，即可保持內容始終處於同一位置。