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 |
