[Scroll] Div fixe en detectant le scroll

Version imprimable

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

[Scroll] Div fixe en detectant le scroll

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.

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:

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>

25/06/2007, 21h38
Louis-Guillaume Morand
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:

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:

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 :D limite, moi le saccad� ou meme en d�cal� m'irait aussi. j'aimerai juste que ce menu soit le plus souvent possible accessible
25/06/2007, 21h42
SpaceFrog

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
25/06/2007, 21h54
Louis-Guillaume Morand

oups, mal regard�. :oops:

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?
25/06/2007, 22h10
Auteur
et en utilisant la propri�t�
Code:

1 2 position: fixed;
?
Avec IE (qui ne connait pas cette propri�t�), il faut faire autrement.

Tu peux t'inspirer de ce script (au moins le CSS)
26/06/2007, 20h17
Louis-Guillaume Morand

bah le position:fixed marche � merveille sous FF et IE7, et comme je prout ceux qui restent sous IE6, ca me va parfaitement :)

merci beaucoup

Bonjour, j'ai suivi votre post pour tenter de faire la m�me chose mais avec 2 element non scrollable qui entoure un element scrollable horizontal 8O :D

voici mon code le pb est que ma bar de scroll se positionne sous mon div scrollable et non pas comme une scrollbar normal ce que je voudrais en r�alit�.
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 body { overflow:hidden; margin:0px; font-family: Arial; }  #conteneur { height:100%; width:100%; overflow:auto }  #custom { float: left; padding-left: 28px; font-size: 13px; height: 22px; }  div#title { margin-top: 80px; margin-left: 28px; font-size: 15px; width: 120px; height: 22px; }

13/08/2007, 20h33
Overstone

J'arrive � faire marcher ce script en enlevant

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

de ma page ???? es normal ????
13/08/2007, 20h35
SpaceFrog

oui parceque le doctype strict limite les instructions de sorte que le code soit le plus w3correcte possible et docn crossbrowser ...