Rendre le Menu Fixe et Ajouter une Animation au Scroll
Objectifs
Les objectifs de cette vidéo sont de rendre le menu de navigation fixe et d’ajouter une animation fluide au scroll pour améliorer la navigation de votre site web.
Résumé
Apprenez à rendre le menu de navigation fixe et à ajouter une animation au scroll pour une meilleure expérience utilisateur.
Description
Dans cette leçon, nous allons explorer deux améliorations majeures pour la navigation de votre site web. Tout d'abord, nous montrerons comment rendre le menu fixe en haut de la page, grâce à un simple snippet de code fourni par la bibliothèque Materialize. Ensuite, nous illustrerons la manière d'ajouter une animation au scroll en utilisant jQuery, ce qui permet une transition fluide vers l'article ciblé dans votre page.
Pour la navigation fixe, nous utilisons la classe navbar-fixed
de Materialize, activée via une simple déclaration <div>
. Après avoir enregistré et actualisé la page, nous pouvons constater que la navigation reste visible en permanence. Pour ajouter l'animation au scroll, nous intégrons un script trouvé en ligne qui uniformise le déplacement vers les ancres en douceur.
En adaptant ce script pour n'affecter que les liens de navigation (en utilisant nav.a
), nous limitons l'animation au menu de navigation. En quelques lignes de code, nous avons transformé notre thème en one page fonctionnel, améliorant drastiquement l’expérience utilisateur.