HTML DOM Element offsetTop 属性

定义和用法

offsetTop 属性返回相对于父级的顶部位置（以像素计）。此属性是只读的。

返回值包括：

  • 元素的顶部位置和外边距
  • 父的顶部内边距、滚动条和边框

请参阅：CSS 框模型教程

offsetParent

所有块级元素都报告相对于偏移父级的偏移量：

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

偏移父级指的是最近的具有非静态位置的祖先。

如果不存在偏移父级，则偏移量是相对于文档正文的。

另请参阅：

属性 offsetLeft

属性 offsetWidth

属性 offsetHeight

Atribut offsetParent

Atribut clientTop

Atribut clientLeft

Atribut clientWidth

Atribut clientHeight

Contoh

Contoh 1

Dapatkan lokasi offsetTop "myDIV":

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

Coba sendiri

Contoh 2

Dapatkan lokasi "myDIV":

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

Coba sendiri

Contoh 3

Buat navigasi yang lepas:

// Dapatkan navigasi
const navbar = document.getElementById("navbar");
// Dapatkan posisi offset navigasi
const sticky = navbar.offsetTop;
// Jika Anda mencapai posisi gerakan yang berada di navigasi, tambahkan kelas sticky ke navigasi. Hapus kelas sticky saat meninggalkan posisi gerakan.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Coba sendiri

Sintaksis

Kembalikan lokasi offset atas:

element.offsetTop

Nilai kembalian

Jenis Deskripsi
Angka Ketinggian atas elemen, dihitung dalam piksel.

Dukungan pelayar

Semua pelayar mendukung element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan Dukungan