Właściwość offsetTop Element DOM HTML

Definicja i użycie

offsetTop Właściwość zwraca pozycję wierzchołkową względem rodzica (w pikselach). Ta właściwość jest jedynie do odczytu.

Zwracana wartość obejmuje:

  • Pozycja górna elementu i marginesy
  • Wewnętrzna margines górny, paski przewijania i obramowanie rodzica

Zobacz również:Tutorial CSS ramki

offsetParent

Wszystkie blokowe elementy zgłaszają odchylenia względem odchylnego rodzica:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Odchylny rodzic to najbliższy przodek o niestatycznym położeniu.

Jeśli nie istnieje odchylny rodzic, odchylenie jest względne do ciała dokumentu.

Zobacz również:

Właściwość offsetLeft

Właściwość offsetWidth

Właściwość offsetHeight

Atrybut offsetParent

Atrybut clientTop

Atrybut clientLeft

Atrybut clientWidth

Atrybut clientHeight

Przykład

Przykład 1

Uzyskaj pozycję offsetTop "myDIV":

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

Spróbuj sam

Przykład 2

Uzyskaj pozycję "myDIV":

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

Spróbuj sam

Przykład 3

Utwórz nawigację przylegającą do góry:

// Uzyskaj nawigację
const navbar = document.getElementById("navbar");
// Uzyskaj pozycję nawigacji
const sticky = navbar.offsetTop;
// Dodaj klasę sticky do paska nawigacji, gdy osiągasz jego pozycję przewijania. Usuń klasę sticky, gdy opuszczasz pozycję przewijania.
function myFunction() {
  jeśli (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Spróbuj sam

Gramatyka

Zwróć pozycję top offset:

element.offsetTop

Zwrócona wartość

Typ Opis
Numer Pozycja górna elementu, wyrażona w pikselach.

Wsparcie przeglądarki

Wszystkie przeglądarki wspierają to element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie