Elemento offsetTop _
❮ L'oggetto elementoEsempio
Ottieni la posizione offsetTop di un elemento <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definizione e utilizzo
La proprietà offsetTop restituisce la posizione superiore (in pixel) rispetto alla parte superiore dell'elemento offsetParent.
Il valore restituito include:
- la posizione superiore e il margine dell'elemento
- il riempimento superiore, la barra di scorrimento e il bordo dell'elemento offsetParent
Nota: l' elemento offsetParent è l'antenato più vicino che ha una posizione diversa da static.
Suggerimento: per restituire la posizione sinistra di un elemento, utilizzare la proprietà offsetLeft .
Supporto browser
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Sintassi
Restituire la posizione di offset superiore:
object.offsetTop
Dettagli tecnici
Valore di default: | nessun valore predefinito |
---|---|
Valore di ritorno: | Un numero, che rappresenta la posizione superiore dell'elemento, in pixel |
Versione DOM: | CSSOM |
Altri esempi
Esempio
Ottieni la posizione dell'elemento aa <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Esempio
Crea una barra di navigazione appiccicosa:
// 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");
}
}
❮ L'oggetto elemento