HTML DOM Element offsetTop egenskap

Definition och användning

offsetTop Egenskapen returnerar topppositionen relativt till föräldern (i pixlar). Denna egenskap är skrivskyddad.

Returvärdet inkluderar:

  • Elementets toppposition och marginal
  • Översta toppmärgen, rullgardin och kantlinje på föräldern

Se också:CSS rammodell教程

offsetParent

Alla blockelement rapporterar avståndet relativt till offsetföräldern:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Offsetförälder är den närmaste anceslern med en icke-statisk position.

Om det inte finns någon offsetförälder, är avståndet relativt dokumentets text.

Se också:

offsetLeft egenskap

offsetWidth egenskap

offsetHeight egenskap

offsetParent-egenskapen

clientTop-egenskapen

clientLeft-egenskapen

clientWidth-egenskapen

clientHeight-egenskapen

Exempel

Exempel 1

Hämta offsetTop-positionen för "myDIV":

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

Prova själv

Exempel 2

Hämta positionen för "myDIV":

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

Prova själv

Exempel 3

Skapa en klistrande navigationsfält:

// Hämta navigationsfältet
const navbar = document.getElementById("navbar");
// Hämta navigationsfältets offset-position
const sticky = navbar.offsetTop;
// När du når dess rullposition läggs sticky-klassen till i navigationsfältet. Ta bort sticky-klassen när du lämnar rullpositionen.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Prova själv

Syntax

Returnerar toppoffset-positionen:

element.offsetTop

Returvärde

Typ Beskrivning
Nummer Elementets toppposition, mätt i pixlar.

Webbläsarstöd

Alla webbläsare stöder detta element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd Stöd