欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js監(jiān)聽滾動(dòng)條滾動(dòng)事件使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置

 更新時(shí)間：2014年01月24日 15:08:05   作者：  
js如何監(jiān)聽滾動(dòng)條滾動(dòng)事件，使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置，下面有個(gè)不錯(cuò)的示例，大家可以參考下
小知識(shí)點(diǎn)，廢話不多說，直接上代碼

css：
復(fù)制代碼 代碼如下:

<pre name="code" class="css"><style>
#anchor:{
position:absulate;
top:40%;
left:40%;
width:100px;
height:100px;
background-color:red;
}
</style></pre><br>

js:
復(fù)制代碼 代碼如下:

<pre name="code" class="javascript">var auchorTop = $("#anchor").css("top");
auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf("p"))); //首先在監(jiān)聽器外部記錄某id=anchor的標(biāo)簽的初始位置
window.onscroll = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
$("#anchor").css("top", anchorTop + top + "px");
};</pre>

html:
復(fù)制代碼 代碼如下:

<div id="anchor"></div>

在window.onscroll上即可添加滾動(dòng)條滾動(dòng)事件，在監(jiān)聽函數(shù)中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以這么寫，就是避免不同瀏覽器的兼容性，這里我測(cè)試了chrom和ff瀏覽器，前者支持document.body.scrollTop這個(gè)屬性，后者支持另一個(gè)屬性，因此可以用‘||'符號(hào)糅合這兩個(gè)屬性，兼容不同瀏覽器。anchorTop就是目標(biāo)的開始與瀏覽器頂部的距離，這里還需要注意的是'#anchor‘這個(gè)標(biāo)簽的position：absulate，否則top屬性值總是是0px。

當(dāng)滾動(dòng)條滾動(dòng)時(shí)，top值變化，隨后將'#anchor'的初始top值加上滾動(dòng)條的top值，即可保持內(nèi)容始終處于同一位置。

相關(guān)文章

最新評(píng)論