Un menu qui se déplace

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

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, 11h03

top dépend du style ....

=> style.top

CUCARACHA · 07/10/2005, 11h12

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, 11h22

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

Je suis carrément perdu.

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

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, 11h44

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, 11h45

question subsidiarie l'element est en positon absolute ?

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

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, 11h52

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, 12h07

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, 12h11

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, 12h13

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, 12h13

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, 12h15

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, 12h16

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, 12h20

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, 12h22

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

DW a raison...

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

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, 12h26

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, 12h28

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

Vue hybride

Discussions similaires

Partager

Partager