Свойство offsetTop элемента
❮ Элемент объектаПример
Получите позицию offsetTop элемента <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Определение и использование
Свойство offsetTop возвращает верхнее положение (в пикселях) относительно верхнего края элемента offsetParent.
Возвращаемое значение включает:
- верхнее положение и поле элемента
- верхний отступ, полоса прокрутки и граница элемента offsetParent
Примечание. Элемент offsetParent — это ближайший предок, положение которого отличается от статического.
Совет: Чтобы вернуть позицию элемента слева, используйте свойство offsetLeft .
Поддержка браузера
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Синтаксис
Вернуть верхнюю позицию смещения:
object.offsetTop
Технические детали
Значение по умолчанию: | нет значения по умолчанию |
---|---|
Возвращаемое значение: | Число, представляющее верхнюю позицию элемента в пикселях. |
Версия ДОМ: | CSSOM |
Дополнительные примеры
Пример
Получить позицию элемента <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Пример
Создайте липкую панель навигации:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var 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");
}
}
❮ Элемент объекта