JS moderne, EXO #3 : Fixer une barre de navigation au scroll

Continuons à manipuler le JavaScript moderne que nous avons appris ensemble dans la série de tutos dédiées à l'apprentissage du JavaScript moderne.

Tuto JS moderne, EXO #3 : Fixer une barre de navigation au scroll

Pour cet exercice pratique, nous allons apprendre à mettre en place une barre de navigation dont la particularité sera que lorsque celle-ci touchera le haut de la fenêtre du navigateur, alors, elle devra rester toujours visible à l'écran (c'est ce qu'on appelle aussi un sticky menu).
Fixer une barre de navigation au scroll est de plus en plus fréquent sur les sites Internet et permet une meilleure expérience utilisateur (l'élément fixé, comme le menu restant toujours visible et accessible).

Je vous propose donc un cours ainsi qu'un exercice concret pour pra-ti-quer !

L'exercice sera dans un second temps, plus complexe, afin de pouvoir répondre à toutes les attentes pour ce genre de comportement d'une barre de navigation.

Tous les fichiers de travail sont fournis !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Pour suivre ce tutoriel dans de bonnes conditions, il est recommandé de connaître :

• Les bases du JavaScript moderne
• Le CSS Grid