Свойство offsetTop элемента HTML DOM
- Предыдущая страница offsetParent
- Следующая страница outerHTML
- Вернуться на один уровень выше Объект Elements DOM HTML
Определение и использование
offsetTop
Свойство возвращает верхнее положение относительно родителя (в пикселях). Это свойство является только для чтения.
Возвращаемые значения включают:
- Положение верха элемента и отступ
- Внутренний отступ верха родителя, полосы прокрутки и рамка
См. также:Урок по CSS фреймворку
offsetParent
Все блочные элементы сообщают о смещении относительно смещенного родителя:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
Смещенный родитель означает ближайшего предка с нестатическим положением.
Если отсутствует смещенный родитель, смещение относительно текста документа.
Дополнительная информация:
Пример
Пример 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 |
Поддержка | Поддержка | Поддержка | Поддержка | Поддержка | Поддержка |
- Предыдущая страница offsetParent
- Следующая страница outerHTML
- Вернуться на один уровень выше Объект Elements DOM HTML