Propriété offsetTop de l' élément
❮ L'objet élémentExemple
Obtenez la position offsetTop d'un élément <div> :
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Définition et utilisation
La propriété offsetTop renvoie la position du haut (en pixels) par rapport au haut de l'élément offsetParent.
La valeur renvoyée comprend :
- la position supérieure et la marge de l'élément
- le rembourrage supérieur, la barre de défilement et la bordure de l'élément offsetParent
Remarque : L' élément offsetParent est l'ancêtre le plus proche qui a une position autre que statique.
Astuce : Pour renvoyer la position gauche d'un élément, utilisez la propriété offsetLeft .
Prise en charge du navigateur
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Syntaxe
Renvoie la position de décalage supérieure :
object.offsetTop
Détails techniques
Valeur par défaut: | pas de valeur par défaut |
---|---|
Valeur de retour : | Un nombre, représentant la position supérieure de l'élément, en pixels |
Version DOM : | CSSOM |
Plus d'exemples
Exemple
Obtenez la position d'un élément <div> :
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Exemple
Créez une barre de navigation collante :
// 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'objet élément