码农教程 - 一技在手,衣食无忧! tools

目录

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属性是只读的。

教程：

CSS 盒子模型

偏移父级

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

  • 顶部偏移
  • 向左偏移
  • 偏移宽度
  • 偏移高度

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

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

也可以看看：

offsetLeft 属性.

offsetWidth 属性.

offsetHeight 属性.

offsetParent 属性.

clientTop 属性

clientLeft 属性

clientWidth 属性

clientHeight 属性

语法

返回顶部偏移位置：

element.offsetTop

返回值

类型 描述
数字 元素的顶部位置（以像素为单位）。

更多示例

创建粘性导航栏：

// Get the navbar
const navbar = document.getElementById("navbar");

// Get the offset position of the navbar
const sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
亲自试一试 »

浏览器支持

element.offsetTop所有浏览器都支持：

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes
❮上一节 ❮ 元素对象参考 下一节❯