Récupérer le top d'un élément en position: fixed

**Maximil ian** · 30/11/2004, 17h18

Bonjour,

J'ai une page qui ressemble à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
...
<script type="text/javascript">
// menu flottant compatible MSIE
window.onscroll = function()  {
   with (document.getElementById("menu_gauche").style) {
   	position="absolute";
   	top=document.body.scrollTop+10+"px";
   }
}
</script>
...
<body>
...
  <!-- Menu flottant avec position: fixed -->
  <span style="border-style: solid; border-width: 2px; width: 350px;
   margin: 2px; float: left; position: fixed" id="menu_gauche">
 
        <table border='1' cellpadding='5' width='340px'>
             <tr><td id='chap1'><a href='proto-menu.php?id_chap=1'
                    onmouseover="MontrerMenu('menu1');" 
                     onfocus="MontrerMenu('menu1');">Chapitre 1</a>
                   </td>
              </tr>
              ...
        </table>
 
   </span>
...

A savoir un menu flottant sur la gauche mis en position: fixed (pour les browsers respectueux des standards) et qui remonte en haut de l'écran sur un onScroll (pour IE).

Le onMouseOver sur un élément du menu flottant doit provoquer l'affichage d'un sous-menu déroulant juste en face.
Pour bien positionner le menu déroulant, il me faut entre autres récupérer la position haute de l'élément du menu flottant qu'on a survolé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
    alert(document.getElementById('chap1').offsetTop);

Au début, cette position est juste mais quand on fait défiler la page vers le bas, elle reste identique alors que le menu flottant a bien bougé vers le bas.
Pour prendre un exemple concret, si j'ai un élément du menu dont le offsetTop est à 25 pixels au départ, quand je fais scroller la page de 50 pixels vers le bas il devrait se trouver à 75 pixels et non plus 25 comme c'est le cas...

J'ai essayé de remplacer "offsetTop" par "top", "clientTop", "scrollTop" mais sans succès. Pareil en utilisant des <div> à la place du <table> pour le menu flottant...

Y-a-t'il un moyen de récupérer la position haute d'un élément après qu'il ait dynamiquement bougé dans la page

:

Merci pour vos réponses !

**SpaceFrog** · 30/11/2004, 17h35

à part faire la différence entre le offsetTop et le ScrollTop de la page ...

**Matthieu2000** · 30/11/2004, 17h36

alert(0+document.body.scrollTop+document.getElementById('chap1').offsetTop);

...

**Maximil ian** · 01/12/2004, 09h00

Effectivement c'est tout bête, je n'y avais pas pensé

En tout cas ça marche...

**sk8world** · 26/10/2007, 09h54

Bonjour à tous,

J'ai un problème comparable à celui qu'a eu Maximilian (c'était en 2004...). Voila j'ai créé un sélecteur de couleur, qui lorsque je clique dessus, laisse apparaitre une palette de couleur. Celle ci marche parfaitement bien. Cependant lorsque je mets ce bouton dans un div scrollable (overflow) et que je descend la scroll bar puis clique sur le bouton, la palette apparaît plus bas.

Ma fonction pour trouver la position recherche les offsetTop et offsetLeft tant qu'il y a des parents. Cependant comment faire pour prendre en compte les ascenceurs des div ainsi que la position du scroll.

J'ai essayé avec scrollTop mais ça n'a l'air de marcher que pour le scroll du document et non pas pour un div

Voici le code de ma fonction pour trouver la position. Le paramètre est l'objet appelant la palette de couleurs (le bouton):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci pour votre aide
Sébastien

Récupérer le top d'un élément en position: fixed

JavaScript

Discussions similaires

Partager

Partager