Discussion :

[kursushc]

Bonjour à tous,

Je suis tombé sur un effet très sympa ici que je cherche à reproduire.

En gros le menu de gauche est en position absolute avec un margin-top. Lorsque la page est scrollée et que le menu atteint le haut de la fenêtre, il est basculé en position fixed.

Seul problème: je me suis mis à javascript très récemment et je n'arrive pas à isoler le script, qui contient d'autres fonctions n'ayant rien à voir.

Le script est ici, la partie intéressante est à la fin.

Auriez-vous quelques pistes pour m'aider ?

Merci beaucoup pour l'aide.

[nours312]

le principe est de placer un écouteur sur le document et plus particulièrement sur l'event "scroll"

à chaque scroll, on verifi récupère la hauteur du scroll et on le compare à notre repère (ex : 200px, position initiale en absolute)

Si le scrollTop est supérieur à 190 on passe le menu en position:fixed avec top:10px,
Si le scrollTop est inférieur à 190, on le bascule en position:absolute avec top:200px ...

Attention, dans ton exemple, le gars code avec une lib (jQuery je crois) donc tu devra faire autrement si tu code sans lib

@++

[SpaceFrog]

c'est dans le js de la page avec ce titre

Code :

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

1
2
3
4
5
6
7
/*
	 * MAGICAL SCROLLING NAV
	 * (not that magical)
	 * 
 	 * This is using lots of vars because it gets called all the time 
 	 * on scroll, so it needs to be fast.
	 */

[kursushc]

Ok merci pour vos réponses je m'en suis sorti (ça m'a pris l'après-midi mais bon )

A noter que Chrome m'a causé beaucoup de soucis car il interprétait mal scrollTop: l'élément était à peine au milieu de la page qu'il le considérait comme tout en haut !
En cause l'élément précédent dans le flux qui n'avait pas de height

A+