Свойство offsetTop
Пример
Получить положение offsetTop элемента <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Попробуйте сами »
Определение и использование
Свойство offsetTop возвращает верхнюю позицию (в пикселях) относительно верхней части элемента offsetParent.
Возвращаемое значение включает в себя:
- верхняя позиция и поле элемента
- верхний отступ, полоса прокрутки и границей элемента offsetParent
Примечание: Элемент offsetParent - это ближайший предок, который имеет позицию, отличную от статической.
Совет: Чтобы вернуть левую позицию элемента, используйте свойство offsetLeft.
Поддержка браузера
Свойство | |||||
---|---|---|---|---|---|
offsetTop | Да | 8.0 | Да | Да | Да |
Синтаксис
Верните верхнее смещенное положение:
object.offsetTop
Технические детали
Значение по умолчанию: | нет значения по умолчанию |
---|---|
Вернёт значение | Число, представляющее верхнюю позицию элемента, в пикселях |
DOM Версия: | CSSOM |
Ещё примеры
Пример
Получить положение элемента <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Попробуйте сами »
Пример
Создайте липкую панель навигации:
//Получить панель навигации
var navbar = document.getElementById("navbar");
//
Получить смещенное положение навигационной панели
var sticky = navbar.offsetTop;
// Добавьте класс sticky на панель навигации, когда достигнете ее положения прокрутки.
Повторно используйте класс sticky, когда вы покидаете положение прокрутки.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Попробуйте сами »