4.8/5 Trustpilot (1399 avis)
JS moderne, EXO #9, Modifier la Nav sur l'événement scroll
JS moderne, EXO #9, Modifier la Nav sur l'événement scroll
Dans ce cours en vidéo, nous allons concevoir une barre de navigation dynamique et responsive qui réagit intelligemment au comportement de l’utilisateur :
- La navbar se cache automatiquement lorsque l’utilisateur fait défiler la page vers le bas.
- Elle réapparaît en douceur lorsqu’il remonte.
- Une animation CSS fluide rend l’ensemble élégant et professionnel.
- Le menu est responsive, avec une icône burger mobile qui se referme automatiquement.
Ce tuto s’adresse aux développeurs web débutants à intermédiaires, désireux d’améliorer l’UX de leurs interfaces en intégrant des fonctionnalités modernes avec peu de code.
Nous utiliserons uniquement HTML, CSS et JavaScript pur, sans aucune bibliothèque externe.
Le code de ce tutoriel est à votre disposition.
À la fin de cette formation, vous saurez mettre en place une navbar "intelligente", adaptée à tous les supports, y compris mobile.
Un bonus : des bonnes pratiques pour l’accessibilité et le responsive design.
Pour aller plus loin : si vous passiez votre Certification Frontend en ma compagnie ?
- Formation HTML, CSS & JavaScript
- Cours & Exercices d'application
- Validation des acquis
- Projet final
Combien ça coûte ?
Votre CPF peut vous aider à financer cette formation !
PLUS D'INFOS SUR LE PARCOURS DEVELOPPEUR FRONT END.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Obtenir la valeur du scroll de départ
Obtenir la valeur du scroll de départ
Leçon 2
Obtenir la valeur du scroll courant
Obtenir la valeur du scroll courant
Leçon 3
Cacher la Nav si le scroll descend
Cacher la Nav si le scroll descend
Leçon 4
Montrer la Nav si le scroll remonte
Montrer la Nav si le scroll remonte
Leçon 5
Ecrire le code HTML de la Nav
Ecrire le code HTML de la Nav
Leçon 6
Mettre en forme la Nav desktop
Mettre en forme la Nav desktop
Leçon 7
Mettre en forme la Nav mobile
Mettre en forme la Nav mobile
Table des matières
Leçon 1
Obtenir la valeur du scroll de départ
09m22
Leçon 2
Obtenir la valeur du scroll courant
03m45
Leçon 3
Cacher la Nav si le scroll descend
05m38
Leçon 4
Montrer la Nav si le scroll remonte
05m58
Leçon 5
Ecrire le code HTML de la Nav
04m49
Leçon 6
Mettre en forme la Nav desktop
05m04
Leçon 7
Mettre en forme la Nav mobile
06m17
Leçon 8
Faire fonctionner la Nav
04m14
Leçon 9
Bonus pour un site one page
04m18
Aperçus
Avis des apprenants