Odsunięcie elementuTop Property
❮ Obiekt elementuPrzykład
Pobierz offsetTop pozycję elementu <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definicja i użycie
Właściwość offsetTop zwraca górną pozycję (w pikselach) względem góry elementu offsetParent.
Zwracana wartość obejmuje:
- górna pozycja i margines elementu
- górne dopełnienie, pasek przewijania i obramowanie elementu offsetParent
Uwaga: Element offsetParent jest najbliższym przodkiem, który ma pozycję inną niż statyczna.
Wskazówka: Aby zwrócić lewą pozycję elementu, użyj właściwości offsetLeft .
Obsługa przeglądarki
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Składnia
Zwróć górną pozycję przesunięcia:
object.offsetTop
Szczegóły techniczne
Domyślna wartość: | brak wartości domyślnej |
---|---|
Wartość zwrotu: | Liczba reprezentująca najwyższą pozycję elementu w pikselach |
Wersja DOM: | CSSOM |
Więcej przykładów
Przykład
Pobierz pozycję elementu aa <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Przykład
Utwórz lepki pasek nawigacyjny:
// 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");
}
}
❮ Obiekt elementu