Un menu qui se déplace

**Olish** · 07/10/2005, 09h56

Bonjour!

Je cherche à faire se déplacer mon menu dans ma page web en même temps que le scroll.

J'ai écrit ce script et j'ai déjà essayé plusieurs combinaisons et rechercher un peu partout mais rien:

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
 
<script language="javascript">
 
document.body.onload="window.setTimeout('javascript:position_boite();',1000);";
 
function position_boite() {
alert("yo!");
 
h_boite=document.getElementById("boite_deplacable").top;
h_boite=(h_boite+window.pageYOffset)/2;
document.getElementById("boite_deplacable").top=h_boite;
 
window.setTimeout("javascript:position_boite();",1000);
}
 
</script>

Quelqu'un peut-il m'aider s'il-vous-plaît?

Merci beaucoup.

**SpaceFrog** · 07/10/2005, 10h03

top dépend du style ....

=> style.top

CUCARACHA · 07/10/2005, 10h12

Salut,

C'est assez simple, il te suffit de déclarer l'évennement onscroll dans ton body :

Code :

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

<body MS_POSITIONING="GridLayout" language=javascript onscroll="return window_onscroll()">

Puis de créer la fonction :

Code :

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

1
2
3
4
5
6
7
8
9
<script language=javascript>
<!--
 
function window_onscroll() {
    window.document.getElementById("boite_deplacable").top =  window.document.body.scrollTop;
}
 
//-->
</script>

Bien à toi

Laurent Jordi

**Olish** · 07/10/2005, 10h22

Désolé ça ne marche pas non plus.

Je suis carrément perdu.

**SpaceFrog** · 07/10/2005, 10h23

holà !!!!

je parle dans le vide ou quoi !!!!!!!!

window.document.getElementById("boite_deplacable").top

top est une propriété du STYLE ....

**Olish** · 07/10/2005, 10h44

Non tu ne parles pas dans le vide mais ça ne fonctionne pas non plus ainsi:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script language=javascript>
<!--
 
function window_onscroll() {
    window.document.getElementById("boite_deplacable").style.top =  window.document.body.scrollTop;
}
 
//-->
</script>

Je ne suis pas sourd.

**SpaceFrog** · 07/10/2005, 10h45

question subsidiarie l'element est en positon absolute ?

**Olish** · 07/10/2005, 10h48

En position absolute? Absolument!

Code :

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

1
2
 
<div id="boite_deplacable" align="center" style="left:0; top:0; position:absolute;">

Mais où est l'embrouille alors???

**SpaceFrog** · 07/10/2005, 10h52

et tu la lance quand la fonction on_scroll ???

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
<script language=javascript>
<!--
 
function window_onscroll() {
 
    window.document.getElementById("boite_deplacable").style.top =  window.document.body.scrollTop+150+'px';
}
 
//-->
</script>
 
</head>
<body onscroll="window_onscroll()">
<a href="javascript:(confirm('oui ou non')?window.location.href='newpage.htm':void(0));">ici</a>
<div id="boite_deplacable" style="height:150px;width:150px;background-color:red;position:absolute; top:150px">sfqsd</div>
<div style="height:1500px;">ddd</div>
</body>
</html>

si tu ne mets rien dans le body onscroll ...

**Olish** · 07/10/2005, 11h07

Si ton script fonctionne, chez moi il ne fonctionne pas, ni dans Firefox, ni dans Internet Explorer.

Par contre, je travaille avec Dreamweaver MX 2004 et dans la liste déroulante des attributs disponibles pour la balise BODY il n'y a pas d'événement onscroll prévu...

**SpaceFrog** · 07/10/2005, 11h11

Ben tu dois avois un sérieux problème car chez moi il focntionne pour les deux ... testé et approuvé !!!!

mets l'intégralité de ton code que je voies ou tu te fourvoies ...

**Mr N.** · 07/10/2005, 11h13

Chez moi ca tourne nickel sous Fx (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050920 Firefox/1.0.7)

**Olish** · 07/10/2005, 11h13

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javascript>
<!--
 
function window_onscroll() {
 
    window.document.getElementById("boite_deplacable").style.top =  window.document.body.scrollTop+150+'px';
}
 
//-->
</script>
</head>
 
<body onscroll="javascript:window_onscroll();">
<a href="javascript:(confirm('oui ou non')?window.location.href='newpage.htm':void(0));">ici</a>
<div id="boite_deplacable" style="height:150px;width:150px;background-color:red;position:absolute; top:150px">sfqsd</div>
<div style="height:1500px;">ddd</div>
</body>
</html>

**Mr N.** · 07/10/2005, 11h15

Envoyé par Olish

Par contre, je travaille avec Dreamweaver MX 2004 et dans la liste déroulante des attributs disponibles pour la balise BODY il n'y a pas d'événement onscroll prévu...

+1
http://giminik.developpez.com/xhtml/body.html

**SpaceFrog** · 07/10/2005, 11h16

partie en rouge inutile...

onscroll n'attend pas une rectette de crèpes suzette mais uniquement du javascript ....

sinon javascript est activé dans tes browsers ???

**SpaceFrog** · 07/10/2005, 11h20

tu as quelle version de browsers ???

sinon mets toute la page dans un div et utilise le onscroll du div ...

**Mr N.** · 07/10/2005, 11h22

Enleve la dtd et tu verras que ca marche !
Quirks mode vs Standards compliance mode

DW a raison...

**Olish** · 07/10/2005, 11h26

Oui je me doute. J'ai fait avec et sans ça ne fonctionne pas non plus.

Et javascript est activé partout.

**Mr N.** · 07/10/2005, 11h26

Fais une recherche de onscroll sur le W3c, les resultats sont uniquement pour SVG...

Donc en html, pas d'attribut onscroll

**Mr N.** · 07/10/2005, 11h28

Envoyé par Olish

Oui je me doute. J'ai fait avec et sans ça ne fonctionne pas non plus.

J'ai essayé ton code : pas de scroll
J'ai enlevé le doctype : scroll !

Ta page s'affiche en quel mode quirks ou standard ? ("view page info" sous Fx)

Un menu qui se déplace

JavaScript

Discussions similaires

Partager

Partager