Bonsoir,
Déjà il te faudrait détecter quand on scroll (donc avec la méthode scroll sur $(document), donc en gros sur la page).
Si on scroll il te faudrait ensuite détecter quand on scroll vers le bas. Donc tu as la méthode scrolltop qui te donne la position actuel du scroll, donc avec ça tu peux faire une condition :
- Si position actuel du scroll est supérieur a 0 (ca veut dire qu'on descend)-
- Changer le css.
- Sinon
- Remettre le CSS a la normal.
Avec si vraiment tu cherches un résultat particulier, par exemple que le changement du CSS se fasse a une certaine position du curseur.
Personnellement je fais mes tests en prenant la valeur de scrolltop en la mettant dans une console.log.
Et là tu peux dire que le changement CSS se fasse a 70, 80 etc.. Selon ton choix et le résultat attendu.
Mais dans le cas du site que tu as pris en exemple, le changement CSS se fait dès le début du scroll et pas a un niveau particulier, donc dans ce cas tu peux utiliser l'exemple du premier paragraphe.
Et un conseil, aides toi de la doc de jQuery elle est particulièrement bien expliqué et les exemples aident beaucoup :D.
Autre petite astuce :
Si tu as beaucoup de CSS a appliqué sur ton élément. Je te conseil de ne pas changer le CSS directement mais d'ajouter une classe CSS a ton élément.
Un dernier truc :
Si toi et l'anglais ça fais 42 tu peux utiliser la doc non officiel en Français.
Mais le mieux reste évidemment la doc officiel ^^.