HTML DOM Element offsetTop 屬性

定義和用法

offsetTop 屬性返回相對于父級的頂部位置（以像素計）。此屬性是只讀的。

返回值包括：

  • 元素的頂部位置和外邊距
  • 父的頂部內邊距、滾動條和邊框

請參閱：CSS 框模型教程

offsetParent

所有塊級元素都報告相對于偏移父級的偏移量：

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

偏移父級指的是最近的具有非靜態位置的祖先。

如果不存在偏移父級，則偏移量是相對于文檔正文的。

另請參閱：

offsetLeft 屬性

offsetWidth 屬性

offsetHeight 屬性

offsetParent 屬性

clientTop 屬性

clientLeft 屬性

clientWidth 屬性

clientHeight 屬性

實例

例子 1

獲取 "myDIV" 的 offsetTop 位置：

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

親自試一試

例子 2

獲取 "myDIV" 的位置：

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

親自試一試

例子 3

創建粘性導航欄：

// 獲取導航欄
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");
  }
}

親自試一試

語法

返回 top offset 位置：

element.offsetTop

返回值

類型 描述
數字 元素的頂部位置，以像素計。

瀏覽器支持

所有瀏覽器都支持 element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持