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)文章
DOM節(jié)點是一個對象，它有著一些屬性。其中有些是只讀的，有些可以直接進行更改（updated on-the-fly）。今天我們就來具體探討下DOM的基本屬性，希望對大家能有所幫助2015-02-02
這篇文章主要給大家介紹了利用Javascript計算二維數(shù)組重復值的方法，文中給出了詳細的示例代碼，相信對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。2016-12-12
這篇文章主要介紹了獲取當前點擊按鈕的id的方法，,需要的朋友可以參考下2014-03-03
用JavaScript實現(xiàn) 鐵甲無敵獎門人 “開口中”猜數(shù)游戲
JavaScript在常人看來都是門出不了廳堂的小語言，僅管它沒有明星語言的閃耀，但至少網(wǎng)頁的閃耀還是需要它的，同時它是一門很實用的語言。2009-10-10
本文主要介紹防止重復發(fā)送 Ajax請求的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
本文主要介紹了JavaScript尾遞歸的實現(xiàn)及應用場景，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
javascript創(chuàng)建cookie、讀取cookie
這篇文章主要介紹了javascript創(chuàng)建cookie、讀取cookie的操作方法，內(nèi)容簡單易學，感興趣的小伙伴們可以參考一下2016-03-03
NW.js （原名 node-webkit）是一個基于 Chromium 和 node.js 的應用運行時，通過它可以用 HTML 和 JavaScript 編寫原生應用程序.這篇文章主要介紹了NW.js 簡介與使用,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了js子頁面如何獲取父頁面數(shù)據(jù),需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JavaScript cookie 跨域訪問之廣告推廣 的相關(guān)資料,需要的朋友可以參考下2016-04-04