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
支持 支持 支持 支持 支持 支持