Récupérer le top d'un élément en position: fixed
Bonjour,
J'ai une page qui ressemble à ça :
Code:
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:
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 !
Problème légèrement différent
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:
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
