Comment trouver la position absolue d'un élément à l'aide de jQuery?

399

Existe-t-il un moyen de trouver la position absolue d'un élément, c'est-à-dire par rapport au début de la fenêtre, à l'aide de jQuery?

akshat
la source

Réponses:

652

.offset() retournera la position de décalage d'un élément comme un objet simple, par exemple:

var position = $(element).offset(); // position = { left: 42, top: 567 }

Vous pouvez utiliser cette valeur de retour pour positionner d'autres éléments au même endroit:

$(anotherElement).css(position)
Croissant frais
la source
90
J'oublie toujours celui-ci, et retrouve votre message quand je google: p
Aren
16
Cela ne semble pas toujours retourner la position absolue en raison de différences de frontières, etc.
Tom
8
J'utilise du chrome et offset()ne renvoie pas la bonne coordonnée supérieure. Il renvoie à la place environ 300 pixels de plus que la coordonnée supérieure de l'élément dans le document. Pourquoi??
SoLoGHoST
1
chrome, FF et IE donnent des résultats différents :(
Rizwan Mumtaz
3
@Aren J'oublie toujours celui-ci et trouve votre commentaire amusant à chaque fois :)
Alex
198

Notez que $(element).offset()vous indique la position d'un élément par rapport au document . Cela fonctionne très bien dans la plupart des circonstances, mais dans le cas de position:fixedvous, vous pouvez obtenir des résultats inattendus.

Si votre document est plus long que la fenêtre et que vous avez fait défiler verticalement vers le bas du document, position:fixedla offset()valeur de votre élément sera supérieure à la valeur attendue du montant que vous avez fait défiler.

Si vous recherchez une valeur relative à la fenêtre (fenêtre), plutôt que le document sur un élément position: fixed, vous pouvez soustraire la scrollTop()valeur du document de la valeur de l'élément fixe offset().top. Exemple:$("#el").offset().top - $(document).scrollTop()

Si le position:fixedparent décalé de l' élément est le document , vous souhaitez lire à la parseInt($.css('top'))place.

Tom Auger
la source
8
Je cherchais exactement ça! Pour le noob comme moi: la valeur à soustraire est$(document).scrollTop()
Dr. Gianluigi Zane Zanettini
3
Impressionnant! Cela devrait être la meilleure réponse!
Shivanshu Goyal