小知識點，廢話不多說，直接上代碼
css：
複製代碼代碼如下:
<pre name="code"><style>
#anchor:{
position:absulate;
top:40%;
left:40%;
width:100px;
height:100px;
background-color:red;
}
</style></pre><br>
js:
複製代碼代碼如下:
<pre name="code">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值，即可保持內容始終處於同一位置。