web-dev-qa-db-fra.com

Obtenir la position d'un div fixe avec jQuery

J'ai un div avec la position "fixe" et je veux obtenir la valeur de sa position par rapport au document entier pendant que l'utilisateur fait défiler la page.

Donc, disons que je place le div sur (x = 0, y = 0), puis l'utilisateur fait défiler un peu et maintenant, par rapport au document, le div est activé (X = 0, y = 300). Je veux obtenir cette information, je veux connaître la position exacte de cette div à chaque instant, encore une fois, par rapport au document entier, pas à la fenêtre ni au navigateur.

J'ai essayé beaucoup de choses mais rien ne semble avoir ce que j'essaie de faire.

L'un d'eux est ce code, qui ne fonctionne pas dans le cas d'un div fixe :

var position = $("#fixed").offset(); /*it gets the position of the div
                                     "fixed" relative to the document*/
$("#fixed").html(position.top);      /*it prints the obtained
                                     value on the div "fixed"*/

Ici, vous pouvez trouver le code courant et vous pouvez voir que lorsque vous faites défiler vers le bas, la valeur de la position du div ne change pas .

Si je ne me trompe pas, le code devrait imprimer une nouvelle valeur sur la div chaque fois qu'il change sa position verticale par rapport au document. Mais il s'avère que cela ne se produit pas.

RESOLU:

La question a été résolue par codef0rmer . Il me manquait de suivre le défilement pour actualiser la valeur de la position du div fixe. J'étais un idiot. Donc le code final fonctionne bien comme il l'a écrit:

$(function () {
    var position = $("#fixed").offset();
    $("#fixed").html(position.top);

    $(window).scroll(function () {
       var position = $("#fixed").offset();
        $("#fixed").html(position.top);
    });
})

Et ici vous pouvez voir le code courant.

Merci à tous et spécialement à codef0rmer.

jqueryhtmlpositionfixed
14
m4rk

vous pouvez utiliser .offset() pour obtenir les coordonnées actuelles de l'élément par rapport au document, alors que .position() pour obtenir les coordonnées actuelles d'un élément par rapport à son parent décalé.

14
codef0rmer

.offset () vous donne les coordonnées relatives à l'ensemble du document.

La méthode .offset () nous permet de récupérer la position actuelle d’un élément par rapport au document. Comparez cela avec .position (), qui récupère la position actuelle par rapport au parent décalé. .Offset () est le plus utile pour positionner un nouvel élément sur un élément existant en vue d’une manipulation globale (en particulier pour l’implémentation par glisser-déposer).

.offset () retourne un objet contenant les propriétés en haut et à gauche.

Remarque: jQuery ne prend pas en charge l'obtention des coordonnées de décalage des éléments masqués, ni la comptabilisation des bordures, des marges ou du remplissage insérés dans l'élément body.

4
j08691

Sauf si vous actualisez la page et que la barre de défilement se trouve à une position différente au moment de son initialisation.

0
Barry