[Scroll] Div fixe en detectant le scroll

**Louis-Guillaume Morand** · 25/06/2007, 16h12

Bonjour,

J'ai un menu lateral positionné en absolu. Il peut faire un slide-in et un slide-out au clic.
Mon problème, j'aimerais qu'il soit toujours visible et qu'il descende quand la page descend ou si vous préférez, qu'il soit toujours à 300pixel du haut du navigateur et non du document.

Il y a surement plusieurs moyens différents de faire cela, mais c'est la detection du moment où l'on scroll qui manque.
dans le pire des cas, je ferais une boucle "infinie" qui check le haut du document visible toutes les N secondes.

Merci de toute aide.

**SpaceFrog** · 25/06/2007, 21h25

a priori tous les scroll que j'ai pu voir qui detectent le scroll de la page donnent des trucs saccadés ...

Le mieux est de se passer de javascript pour faire ça et positionner deux div comme il faut

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
 
<body style='overflow:hidden;margin:0px;'>
<div style="height:100%;width:100%;overflow:auto"> <script type='text/javascript'> for(i=0;i<100;i++){document.write('ligne '+i+ '<br />')}</script></div>
<div style="position:absolute;z-index:2;height:100px;width:100px;border:solid 1px red;top:300px;left:300px"> je ne bouge pas</div>
</body>
 
</html>

**Louis-Guillaume Morand** · 25/06/2007, 21h38

Peut-être n'ai-je pas tout bien suivi mais en tout cas, ca ne marche pas.

actuellement, j'ai donc mon menu lateral (un div)
avec la CSS suivante

Code :

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

1
2
3
4
5
6
7
#menu_hidden{
 width:400px;
 position: absolute;
 left: -360px; 
 top: 300px;
 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

(il est décalé a gauche car c'est un menu glissant

Je lui ai donc rajouté un div container avec ton style inline mais ca ne change rien
Résultat ici:

Donc j'ai pensé que ton overflow:hidden était important. le probleme, c'est que comme c'est le KIT, on peut pas toucher directement à l'attribut body. pas grave, je rajoute une regle CSS

Code :

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

1
2
3
body{
                overflow:hidden;
               }

bah c'est pire ^^. ca marche plus, et j'ai plus de scroll bar.

any idea?

ps: pour le scroll j'ai vu une fois un script qui faisait ca tres bien, avec un effet de rebond mais il faisait 600lignes

limite, moi le saccadé ou meme en décalé m'irait aussi. j'aimerai juste que ce menu soit le plus souvent possible accessible

**SpaceFrog** · 25/06/2007, 21h42

non tu n'as pas du tout suivre en effet ...

l'essentiel est d'avoir un div container qui va contenir l'enseble de la partie scrollable de la page tout doit être dans ce div ... sauf le menu en positon absolute ...

le div container est en overflowauto et occupe tout l'ecran
ce n'est donc pas le body qui scrolle mais le div ...

as tu testé l'exemple donné ...

mets le contenu de ta page dans le div à la place du script
mets le menu dasn l'autre div

**Louis-Guillaume Morand** · 25/06/2007, 21h54

oups, mal regardé.

bon ca risque ne pas être possible car je ne controle pas le debut ou la fin de l'élement body. Comme je dois charger un fichier template_pied.php que je ne controle pas (et qui contient entre autres, la balise de fermeture d'un TABLE) et idem pour le top, je n'ai pas de moyen de tout placer à l'exception du menu dans un container. (je veux automatiser ça via l'éditeur avec les includes facultatifs)

J'imagine qu'il n'y a pas d'autres solutions?