Свойство offsetTop элемента HTML DOM

Определение и использование

offsetTop Свойство возвращает верхнее положение относительно родителя (в пикселях). Это свойство является только для чтения.

Возвращаемые значения включают:

  • Положение верха элемента и отступ
  • Внутренний отступ верха родителя, полосы прокрутки и рамка

См. также:Урок по CSS фреймворку

offsetParent

Все блочные элементы сообщают о смещении относительно смещенного родителя:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Смещенный родитель означает ближайшего предка с нестатическим положением.

Если отсутствует смещенный родитель, смещение относительно текста документа.

Дополнительная информация:

Свойство offsetLeft

Свойство offsetWidth

Свойство offsetHeight

Свойство offsetParent

Свойство clientTop

Свойство clientLeft

Свойство clientWidth

Свойство clientHeight

Пример

Пример 1

Получите position offset "myDIV":

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

Создание sticky навигационной панели:

// Получите навигационную панель
const navbar = document.getElementById("navbar");
// Получите положение навигационной панели
const sticky = navbar.offsetTop;
// Когда вы достигаете его места прокрутки, добавьте класс sticky к навигационной панели. Удалите класс sticky, когда вы покидаете место прокрутки.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Попробуйте сами

Синтаксис

Возврат top смещения позиции:

element.offsetTop

Возвратное значение

Тип Описание
Число Верхнее положение элемента, измеренное в пикселях.

Поддержка браузеров

Все браузеры поддерживают element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка Поддержка