js監(jiān)聽滾動條滾動事件使得某個標簽內(nèi)容始終位于同一位置
更新時間：2014年01月24日 15:08:05 作者：
js如何監(jiān)聽滾動條滾動事件，使得某個標簽內(nèi)容始終位于同一位置，下面有個不錯的示例，大家可以參考下
小知識點，廢話不多說，直接上代碼
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"))); //首先在監(jiān)聽器外部記錄某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上即可添加滾動條滾動事件，在監(jiān)聽函數(shù)中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以這么寫，就是避免不同瀏覽器的兼容性，這里我測試了chrom和ff瀏覽器，前者支持document.body.scrollTop這個屬性，后者支持另一個屬性，因此可以用‘||'符號糅合這兩個屬性，兼容不同瀏覽器。anchorTop就是目標的開始與瀏覽器頂部的距離，這里還需要注意的是'#anchor‘這個標簽的position：absulate，否則top屬性值總是是0px。
當滾動條滾動時，top值變化，隨后將'#anchor'的初始top值加上滾動條的top值，即可保持內(nèi)容始終處于同一位置。
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"))); //首先在監(jiān)聽器外部記錄某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上即可添加滾動條滾動事件，在監(jiān)聽函數(shù)中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以這么寫，就是避免不同瀏覽器的兼容性，這里我測試了chrom和ff瀏覽器，前者支持document.body.scrollTop這個屬性，后者支持另一個屬性，因此可以用‘||'符號糅合這兩個屬性，兼容不同瀏覽器。anchorTop就是目標的開始與瀏覽器頂部的距離，這里還需要注意的是'#anchor‘這個標簽的position：absulate，否則top屬性值總是是0px。
當滾動條滾動時，top值變化，隨后將'#anchor'的初始top值加上滾動條的top值，即可保持內(nèi)容始終處于同一位置。
相關(guān)文章
wufengteam?core統(tǒng)一中心注冊器功能解析
這篇文章主要為大家介紹了wufengteam?core統(tǒng)一中心注冊器功能解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
本文主要介紹了js實現(xiàn)移動端微信頁面禁止字體放大的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS金額小寫轉(zhuǎn)大寫的方法,需要的朋友可以參考下2014-05-05
JavaScript中的偏函數(shù)（Partial?Function）是指一個函數(shù)，它是由另一個函數(shù)通過固定一些參數(shù)而得到的，從而產(chǎn)生了一個新的函數(shù)，本文主要來和大家聊聊偏函數(shù)的原理與使用，希望對大家有所幫助2023-05-05
下面小編就為大家?guī)硪黄狫S獲取復選框的值,并傳遞到后臺的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了JavaScript中匿名函數(shù)用法,實例分析了javascript中匿名函數(shù)的功能、定義及具體用法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS實現(xiàn)頁面加載完成之后自動刷新一次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
用js+iframe形成頁面的一種遮罩效果的具體實現(xiàn)
用js形成頁面的一種遮罩效果，選擇想要進行遮罩的窗口，在這里想要遮罩的是一個iframe窗口，具體的實現(xiàn)如下，感興趣的朋友可以參參考下2013-12-12
js獲取GridView中行數(shù)據(jù)的兩種方法 分享
這篇文章介紹了js獲取GridView中行數(shù)據(jù)的方法，有需要的朋友可以參考一下2013-07-07
JavaScript實現(xiàn)可拖拽的拖動層Div實例
這篇文章主要介紹了JavaScript實現(xiàn)可拖拽的拖動層Div的方法,拖拽頁面中的div塊可實現(xiàn)div塊按照拖動軌跡移動的效果,涉及javascript鼠標事件、頁面元素樣式結(jié)合事件函數(shù)動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08