Proprietà offsetTop dell'elemento DOM HTML

Definizione e uso

offsetTop L'attributo restituisce la posizione superiore rispetto al genitore (in pixel). Questo attributo è solo in lettura.

Il valore di ritorno include：

  • Posizione superiore dell'elemento e margine
  • Margine superiore interna del genitore, barra di scorrimento e bordo

Vedi anche：Guida al modello di riquadro CSS

offsetParent

Tutti gli elementi bloccanti riportano l'offset rispetto al genitore con offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Il genitore con offset è il più vicino antenato con posizione non statica.

Se non esiste un genitore con offset, l'offset è relativo al corpo del documento.

Vedi anche：

Proprietà offsetLeft

Proprietà offsetWidth

Proprietà offsetHeight

Proprietà offsetParent

Proprietà clientTop

Proprietà clientLeft

Proprietà clientWidth

Proprietà clientHeight

Esempio

Esempio 1

Ottieni la posizione di offsetTop di "myDIV":

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

Prova da solo

Esempio 2

Ottieni la posizione di "myDIV":

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

Prova da solo

Esempio 3

Creare una barra di navigazione adesiva:

// Ottieni la barra di navigazione
const navbar = document.getElementById("navbar");
// Ottieni la posizione di scorrimento della barra di navigazione
const sticky = navbar.offsetTop;
// Aggiungi la classe sticky alla barra di navigazione quando raggiungi la sua posizione di scorrimento. Rimuovi la classe sticky quando esci dalla posizione di scorrimento.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Prova da solo

Sintassi

Restituisce la posizione di offset in alto:

element.offsetTop

Valore di ritorno

Tipo Descrizione
Numero La posizione superiore dell'elemento, espressa in pixel.

Supporto del browser

Tutti i browser supportano element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto Supporto