Window pageYOffset 属性
定义和用法
pageYOffset 属性返回文档从窗口左上角滚动的像素。
pageYOffset 属性等于 scrollY 属性。
pageYOffset 属性是只读的。
另请参阅:
实例
例子 1
将内容滚动 100 像素,并提示 pageXOffset 和 pageYOffset:
window.scrollBy(100, 100); alert(window.pageXOffset + window.pageYOffset);
例子 2
创建粘性导航栏:
// 获取导航栏
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");
}
}
语法
window.pageYOffset
或者:
pageYOffset
返回值
| 类型 | 描述 |
|---|---|
| 数字 | 文档从窗口左上角滚动的像素数。 |
浏览器支持
所有浏览器都支持 pageYOffset:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| 支持 | 9-11 | 支持 | 支持 | 支持 | 支持 |