js監(jiān)聽(tīng)滾動(dòng)條滾動(dòng)事件使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置
更新時(shí)間：2014年01月24日 15:08:05 作者：
js如何監(jiān)聽(tīng)滾動(dòng)條滾動(dòng)事件，使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置，下面有個(gè)不錯(cuò)的示例，大家可以參考下
小知識(shí)點(diǎn)，廢話(huà)不多說(shuō)，直接上代碼
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)聽(tīng)器外部記錄某id=anchor的標(biāo)簽的初始位置
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上即可添加滾動(dòng)條滾動(dòng)事件，在監(jiān)聽(tīng)函數(shù)中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以這么寫(xiě)，就是避免不同瀏覽器的兼容性，這里我測(cè)試了chrom和ff瀏覽器，前者支持document.body.scrollTop這個(gè)屬性，后者支持另一個(gè)屬性，因此可以用‘||'符號(hào)糅合這兩個(gè)屬性，兼容不同瀏覽器。anchorTop就是目標(biāo)的開(kāi)始與瀏覽器頂部的距離，這里還需要注意的是'#anchor‘這個(gè)標(biāo)簽的position：absulate，否則top屬性值總是是0px。
當(dāng)滾動(dòng)條滾動(dòng)時(shí)，top值變化，隨后將'#anchor'的初始top值加上滾動(dòng)條的top值，即可保持內(nèi)容始終處于同一位置。
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)聽(tīng)器外部記錄某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)聽(tīng)函數(shù)中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以這么寫(xiě)，就是避免不同瀏覽器的兼容性，這里我測(cè)試了chrom和ff瀏覽器，前者支持document.body.scrollTop這個(gè)屬性，后者支持另一個(gè)屬性，因此可以用‘||'符號(hào)糅合這兩個(gè)屬性，兼容不同瀏覽器。anchorTop就是目標(biāo)的開(kāi)始與瀏覽器頂部的距離，這里還需要注意的是'#anchor‘這個(gè)標(biāo)簽的position：absulate，否則top屬性值總是是0px。
當(dāng)滾動(dòng)條滾動(dòng)時(shí)，top值變化，隨后將'#anchor'的初始top值加上滾動(dòng)條的top值，即可保持內(nèi)容始終處于同一位置。
您可能感興趣的文章:
- js監(jiān)聽(tīng)html頁(yè)面的上下滾動(dòng)事件方法
- vue 純js監(jiān)聽(tīng)滾動(dòng)條到底部的實(shí)例講解
- Bootstrap滾動(dòng)監(jiān)聽(tīng)組件scrollspy.js使用方法詳解
- Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn)
- Bootstrap教程JS插件滾動(dòng)監(jiān)聽(tīng)學(xué)習(xí)筆記分享
- JavaScript實(shí)現(xiàn)點(diǎn)擊文本自動(dòng)定位到下拉框選中操作
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到某個(gè)位置便自動(dòng)定位某個(gè)tr
- JS監(jiān)聽(tīng)滾動(dòng)和id自動(dòng)定位滾動(dòng)
相關(guān)文章
DOM節(jié)點(diǎn)是一個(gè)對(duì)象，它有著一些屬性。其中有些是只讀的，有些可以直接進(jìn)行更改（updated on-the-fly）。今天我們就來(lái)具體探討下DOM的基本屬性，希望對(duì)大家能有所幫助2015-02-02
Javascript計(jì)算二維數(shù)組重復(fù)值示例代碼
這篇文章主要給大家介紹了利用Javascript計(jì)算二維數(shù)組重復(fù)值的方法，文中給出了詳細(xì)的示例代碼，相信對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。2016-12-12
獲取當(dāng)前點(diǎn)擊按鈕的id用this.id實(shí)現(xiàn)
這篇文章主要介紹了獲取當(dāng)前點(diǎn)擊按鈕的id的方法，,需要的朋友可以參考下2014-03-03
用JavaScript實(shí)現(xiàn) 鐵甲無(wú)敵獎(jiǎng)門(mén)人 “開(kāi)口中”猜數(shù)游戲
JavaScript在常人看來(lái)都是門(mén)出不了廳堂的小語(yǔ)言，僅管它沒(méi)有明星語(yǔ)言的閃耀，但至少網(wǎng)頁(yè)的閃耀還是需要它的，同時(shí)它是一門(mén)很實(shí)用的語(yǔ)言。2009-10-10
本文主要介紹防止重復(fù)發(fā)送 Ajax請(qǐng)求的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript尾遞歸的實(shí)現(xiàn)及應(yīng)用場(chǎng)景
本文主要介紹了JavaScript尾遞歸的實(shí)現(xiàn)及應(yīng)用場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
javascript創(chuàng)建cookie、讀取cookie
這篇文章主要介紹了javascript創(chuàng)建cookie、讀取cookie的操作方法，內(nèi)容簡(jiǎn)單易學(xué)，感興趣的小伙伴們可以參考一下2016-03-03
NW.js （原名 node-webkit）是一個(gè)基于 Chromium 和 node.js 的應(yīng)用運(yùn)行時(shí)，通過(guò)它可以用 HTML 和 JavaScript 編寫(xiě)原生應(yīng)用程序.這篇文章主要介紹了NW.js 簡(jiǎn)介與使用,需要的朋友可以參考下2018-02-02
js子頁(yè)面獲取父頁(yè)面數(shù)據(jù)示例
這篇文章主要介紹了js子頁(yè)面如何獲取父頁(yè)面數(shù)據(jù),需要的朋友可以參考下2014-05-05
JavaScript cookie 跨域訪問(wèn)之廣告推廣
這篇文章主要介紹了JavaScript cookie 跨域訪問(wèn)之廣告推廣 的相關(guān)資料,需要的朋友可以參考下2016-04-04