Modifier css lors du scroll

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.

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 ;)

@++

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

Code:

---

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. */

---

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

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 :aie:

A+