Propriété offsetTop de l'élément DOM HTML

Définition et utilisation

offsetTop Cette propriété retourne la position supérieure par rapport au parent (en pixels). Cette propriété est en lecture seule.

La valeur de retour inclut :

  • Position supérieure de l'élément et marge externe
  • Marge supérieure interne du parent, barres de défilement et bordures

Veuillez également consulter :Tutoriel sur le modèle de boîte CSS

offsetParent

Tous les éléments en bloc signalent les décalages par rapport au parent décalé :

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Le parent décalé fait référence au parent le plus proche ayant une position non statique.

Si le parent décalé n'existe pas, la décalage est par rapport au texte principal du document.

Veuillez également consulter :

Propriété offsetLeft

Propriété offsetWidth

Propriété offsetHeight

Attribut offsetParent

Attribut clientTop

Attribut clientLeft

Attribut clientWidth

Attribut clientHeight

Exemple

Exemple 1

Obtenez la position offsetTop de "myDIV" :

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

Essayez-le vous-même

Exemple 2

Obtenez la position de "myDIV" :

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

Essayez-le vous-même

Exemple 3

Créer une navigation collée :

// Obtenez la barre de navigation
const navbar = document.getElementById("navbar");
// Obtenez la position d'offset de la barre de navigation
const sticky = navbar.offsetTop;
// Lorsque vous atteignez la position de défilement, ajoutez la classe sticky à la barre de navigation. Supprimez la classe sticky lorsque vous quittez la position de défilement.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Essayez-le vous-même

Syntaxe

Retour à la position offset top :

element.offsetTop

Valeur de retour

Type Description
Numéro La position supérieure de l'élément, en pixels.

Support du navigateur

Tous les navigateurs le supportent element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support