HTML DOM Element offsetTop 属性

定义和用法

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

返回值包括：

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

请参阅：CSS 框模型教程

offsetParent

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

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

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

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

另请参阅：

offsetLeft 属性

offsetWidth 属性

offsetHeight 属性

Atribute ng offsetParent

Atribute ng clientTop

Atribute ng clientLeft

Atribute ng clientWidth

Atribute ng clientHeight

Halimbawa

Halimbawa 1

Hanapin ang offsetTop na posisyon ng "myDIV":

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

Subukan nang sarili

Halimbawa 2

Hanapin ang posisyon ng "myDIV":

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

Subukan nang sarili

Halimbawa 3

Buwbuo ng navigation bar na sticky:

// Hanapin ang navigation bar
const navbar = document.getElementById("navbar");
// Hanapin ang posisyon ng navigation bar
const sticky = navbar.offsetTop;
// Pagdating ka sa posisyon ng paggalaw, idagdag ang klase 'sticky' sa navigation bar. Itanggal ang klase 'sticky' kapag kaalis sa posisyon ng paggalaw.
function myFunction() {
  kung (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Subukan nang sarili

Mga pangunahing pangungusap

Ibigay ang top offset na posisyon:

element.offsetTop

Halimbawa ng ibigay na resulta

Uri Paglalarawan
Numero Ang taas ng elemento, na ginamit ang pixel.

Suporta ng browser

Lahat ng mga browser ay sumusuporta element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporta Suporta Suporta Suporta Suporta Suporta