社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > js監聽滾動條滾動事件使得某個標籤內容始終位於同一位置_javascript技巧

js監聽滾動條滾動事件使得某個標籤內容始終位於同一位置_javascript技巧

WBOY
發布： 2016-05-16 17:02:38
原創
1222 人瀏覽過

小知識點，廢話不多說，直接上程式碼

css：

複製程式碼 程式碼如下:

<style> <BR>#anchor:{ <BR>position:absulate; <BR>top:40%; <BR>left :40%; <BR>width:100px; <BR>height:100px; <BR>background-color:red; <BR>} <BR></style>
登入後複製


}


}
}
}



js:




複製程式碼


程式碼如下:
var auchorTop = $("#anchor").css("top"); <u>auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf("p"))); / /首先在監聽器外部記錄某id=anchor的標籤的初始位置</u>window.onscroll = function () {
登入後複製
var top = document.documentElement.scrollTop || document.body.scrollTop; $ ("#anchor").css("top", anchorTop top "px");
};


html:



複製程式碼 程式碼如下:
在window.onscroll上即可加入捲軸滾動事件，在監聽函數中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以這麼寫，就是避免不同瀏覽器的兼容性，這裡我測試了chrom和ff瀏覽器，前者支援document.body.scrollTop這個屬性，後者支援另一個屬性，因此可以用'||'符號糅合這兩個屬性，相容於不同瀏覽器。 anchorTop就是目標的開始與瀏覽器頂部的距離，這裡還要注意的是'#anchor‘這個標籤的position：absulate，否則top屬性值總是0px。 當捲軸滾動時，top值變化，隨後將'#anchor'的初始top值加上捲軸的top值，即可保持內容始終處於同一位置。
相關標籤：
监听滚动事件
來源：php.cn
上一篇：js中的時間轉換—毫秒轉換成日期時間的範例程式碼 下一篇：JS將所有物件s的屬性複製給物件r(原生js jquery)_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在行動視圖中，當使用者點擊連結時，如何關閉此導覽列？ 當使用者點擊連結瀏覽網站時，導覽列沒有關閉？我曾嘗試向每個連結新增點擊事件偵聽器以關閉導覽欄，但它不起作用！此外，處於活動位置（即X）的hamberberger選單圖示也沒有很好地...
來自於 2024-04-06 19:23:03
0
1
411
React Three Fiber：為什麼我的滾動事件有延遲？ 在ReactThreeFiber中，我有一個React組件，可以產生一個精靈，我希望該精靈在相機變焦下保持不變。該演算法似乎有效（大小似乎不隨時間變化），但我可以明顯看到它在放大和...
來自於 2024-04-06 13:39:24
0
1
410
如何監聽特定的點擊事件但抑制其他的？ 我的網路應用程式包含一個HTML表格，其中每一行都連結到一個特定的URL：<table><trdata-url="https://www.google....
來自於 2024-04-04 16:55:27
0
1
317
滾動事件偵聽器加入元素，但只有當scrollTop不等於0時才能正確移動 所以我編寫了這個小腳本，其中有兩個列表-已完成/活動任務，您可以通過點擊按鈕切換任務列表，也可以通過點擊“更多信息”閱讀有關任務的更多信息。當點擊更多資訊時，創建了一個新的div元...
來自於 2024-04-01 11:03:26
0
1
326
無法在Typescript中移除EventListener 我正在嘗試刪除打字稿中的事件偵聽器。我在if語句中加入事件監聽器。在else語句中，我試圖刪除這些事件監聽器，但由於某種原因它沒有刪除它們。僅供參考：我有一個按鈕，可以在其中設定布...
來自於 2024-03-30 18:07:42
0
1
295
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板