Метод offsetTop
Пример element.offsetTop
Получить позицию offsetTop из "myDIV":
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 возвращает верхнюю позицию (в пикселях) относительно родительского элемента.
Возвращаемое значение включает:
- верхнюю позицию и поле элемента
- верхний отступ, полосу прокрутки и границу родительского элемента
Свойство offsetTop доступно только для чтения.
Учебник: offsetTop
The offsetParent offsetTop
Все элементы блочного уровня сообщают смещения относительно родительского смещения:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
Смещенный родительский элемент — это ближайший предок элемента, имеющий позицию, отличную от статической.
Если смещенный родительский элемент не существует, смещение выполняется относительно тела документа.
Связные страницы offsetTop
Синтаксис offsetTop
Верните верхнюю позицию смещения:
element.offsetTop
Возвращаемое значение offsetTop
| Тип | Описание |
|---|---|
| Number | Верхнее положение элемента в пикселях. |
Ещё пример offsetTop
Создайте липкую панель навигации:
// Получить navbar
const navbar = document.getElementById("navbar");
//
Получить смещение позиции навигационной панели
const sticky = navbar.offsetTop;
// Добавьте липкий класс к навигационной панели, когда вы достигнете ее позиции прокрутки. Удалите липкий класс, когда вы покинете позицию прокрутки.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Попробуйте сами »
Поддержка offsetTop
element.offsetTop поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |