HTML DOM Element offsetTop eigenschap

Definitie en gebruik

offsetTop De eigenschap retourneert de toppositie ten opzichte van de ouder (in pixels). Deze eigenschap is alleen lezen.

De waarde retourneert:

  • Toppositie en marges van het element
  • Top interieurmarge, scrollbar en rand van de ouder

Raadpleeg ook:CSS frame model handleiding

offsetParent

Alle blokkelementen rapporteren de offset met betrekking tot de offset ouder:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

De offset ouder is de dichtstbijzijnde ouder met een niet-statische positie.

Bestaat de offset ouder niet, dan is de offset ten opzichte van het documenttekst.

Raadpleeg ook:

offsetLeft eigenschap

offsetWidth eigenschap

offsetHeight eigenschap

offsetParent-eigenschap

clientTop-eigenschap

clientLeft-eigenschap

clientWidth-eigenschap

clientHeight-eigenschap

Voorbeeld

Voorbeeld 1

Haal de offsetTop-positie van "myDIV" op:

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

Probeer het zelf

Voorbeeld 2

Haal de positie van "myDIV" op:

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

Probeer het zelf

Voorbeeld 3

Maak een sticky navigatiebalk aan:

// Haal de navigatiebalk op
const navbar = document.getElementById("navbar");
// Haal de offsetpositie van de navigatiebalk op
const sticky = navbar.offsetTop;
// Voeg de sticky klasse toe aan de navigatiebalk wanneer je de scrollpositie bereikt. Verwijder de sticky klasse wanneer je de scrollpositie verlaat.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Probeer het zelf

Syntaxis

Terugkeer toppositie:

element.offsetTop

Terugkeerwaarde

Type Beschrijving
Getal De toppositie van het element, uitgedrukt in pixels.

Browserondersteuning

Alle browsers ondersteunen dit element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning