HTML DOM 元素 offsetTop
示例
获取“myDIV”的 offsetTop 位置
const element = document.getElementById("myDIV");
let pos = element.offsetTop;
自己动手试一试 »
获取“myDIV”的位置
const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;
自己动手试一试 »
更多示例见下文。
描述
offsetTop 属性返回相对于父元素的顶部位置（以像素为单位）。
返回的值包括：
- 元素的顶部位置和外边距
- 父元素的顶部填充、滚动条和边框
offsetTop 属性是只读的。
教程
offsetParent
所有块级元素都报告相对于 offset 父级的偏移量
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
offset 父级是最近的、position 属性不为 static 的祖先元素。
如果不存在 offset 父级，则偏移量相对于文档主体。
另请参阅
语法
返回顶部偏移位置
element.offsetTop
返回值
| 类型 | 描述 |
| Number | 元素的顶部位置，以像素为单位。 |
更多示例
创建粘性导航栏
// 获取导航栏
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");
}
}
自己动手试一试 »
浏览器支持
所有浏览器都支持 element.offsetTop
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
