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;
自己尝试一下 »
更多示例如下。
描述
The offsetTop 属性返回相对于父元素的顶部位置（以像素为单位）。
返回值包括
- 顶部位置和元素的边距
- 父元素的顶部填充、滚动条和边框
The offsetTop 属性是只读的。
教程
The offsetParent
所有块级元素都报告相对于偏移父元素的偏移量
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
偏移父元素是最近的祖先，其位置不是 static。
如果不存在偏移父元素，则偏移量相对于文档主体。
另请参阅
语法
返回顶部偏移位置
element.offsetTop
返回值
| 类型 | 描述 |
| 数字 | 元素的顶部位置，以像素为单位。 |
更多示例
创建一个粘性导航栏
// 获取导航栏
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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
