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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
