Coordonnées absolues d'un élément

[fab256]

Bonjour,

J'utilise une fenêtre fixe (en réalité un DIV) dans mon écran qui reste a la même position lorsqu’on défile la page en utilisant la propriété CSS position: fixed;

Code :

1
2
3
4
5
6
7
.MaFenetre {
position: fixed;
right: 0px;
top: 179px;
width: 140px;
height: 180px;
}

Maintenant je voudrais avoir les coordonnées absolue de cette élément

Code :

1
2
3
var mafen = document.getElement('.MaFenetre');
mafen.top = mafen.getTop();
mafen.left = mafen.getLeft();

Ca me donne toujours les coordonnées 179px et 0px, alors que la fenetre s'est déplacée avec le défilement, comment faire pour avoir les coordonnées absolues avec les défilement?

Merci

[Bovino]

Le principe d'un élément en position fixed est qu'il est précisément à une position fixe sur la partie visible de la page (d'où son nom en fait).
Pour récupérer sa position dans le document, il faut tenir compte de la valeur de scrollTop() et scrollLeft().

[kalimukti]

Envoyé par Bovino

Le principe d'un élément en position fixed est qu'il est précisément à une position fixe sur la partie visible de la page (d'où son nom en fait).
Pour récupérer sa position dans le document, il faut tenir compte de la valeur de scrollTop() et scrollLeft().

Euh... c'est plutôt des fonctions jquery ça, nan ?
Moi j'utilise les propriétés

Code :

offsetleft

et

Code :

offsettop

, j'ai regardé un peu scrolltop et scrollleft, en js ça a l'air plutôt d'être des propriétés, et j'ai du mal à voir la différence par ex entre scrollleft et offsetleft...
enfin, bon, quoiqu'il en soit, ça marche aussi avec offsetleft et offsettop, avec une petite manip un peu spéciale: ces propriétés donnent le offset de l'élément par rapport à son parent. (il faut donc parcourir tout l'arbre, tant qu'il y a un parent, pour avoir les coordonnées absolues: le parcours est en gras dans le code)
(le code que j'utilise est tiré d'un tuto sur le web)
la fonction:

Code :

1
2
3
4
5
6
7
8
9
10
11
function ObjectPosition(obj) {
    var curleft = 0;
      var curtop = 0;
      if (obj.offsetParent) {
            do {
                  curleft += obj.offsetLeft;
                  curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
      }
      return [curleft,curtop];
}

et tu t'en sers de cette façon:

Code :

1
2
3
4
5
6
<div id="MyElementId">My test element</div>
<script language="javascript" type="text/javascript">
    var aryPosition = ObjectPosition(document.getElementById('MyElementId'));
    document.write('MyElementId left offset is ' + aryPosition[0] + '<br />');
    document.write('MyElementId top offset is ' + aryPosition[1] + '<br />');
</script>