Window pageYOffset
示例 1
將內容滾動 100 畫素,然後彈出 pageXOffset 和 pageYOffset
window.scrollBy(100, 100);
alert(window.pageXOffset + window.pageYOffset);
自己動手試一試 »
更多示例見下文。
描述
pageYOffset
屬性返回文件從視窗左上角滾動的畫素數。
pageYOffset
屬性等於 scrollY
屬性。
pageYOffset
屬性是隻讀的。
語法
window.pageYOffset
或者pageYOffset
返回值
型別 | 描述 |
一個數字 | 文件從視窗左上角滾動的畫素數。 |
更多示例
建立粘性導航欄
// 獲取導航欄
const navbar = document.getElementById("navbar");
// 獲取導航欄的偏移位置
const sticky = navbar.offsetTop;
// 當滾動位置達到導航欄時,為其新增 sticky 類。當離開滾動位置時,移除 sticky 類。
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
自己動手試一試 »
瀏覽器支援
pageYOffset
在所有瀏覽器中都受支援
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 9-11 |