Voici un petit code pour les vacances pour vous aider à coder des liens actifs au scroll. C’est-à-dire des liens qui changeraient de style au défilement de la page (quand vous scrollez). Vous les avez peut-être déjà vus sur certains sites web via des sous-navigations pour des contenus assez longs. Ils vous permettent ainsi de savoir où vous en êtes dans votre lecture. Ci-dessous, exemple et explication.
Un « Menu » ou une « Aside » ?
On pourrait dans un premier temps coder en HTML cette sous-navigation. Quelle balise utilisée ? C’est un peu comme vous voulez, selon la nature de cet élément. Mais s’il s’agit d’une table des matières qui vous permettrait de naviguer entre les sections d’une même page, vous pourriez utiliser un Menu (<menu></menu>) ou une Nav (<nav></nav>). Pour moi, comme on retrouve cette navigation pour la plupart du temps de manière verticale et en position fixe (afin de la garder au défilement de la page), et sur le côté (à gauche ou droite ), on pourrait utiliser une balise aside. La balise aside (<aside></aside>) est plutôt considérée comme étant du contenu informatif complémentaire et d’ailleurs, qu’on pourrait faire sauter en version mobile.
Su téléphone, on évite les éléments fixes et superflus. Et puis on a l’habitude de scroller. C’est ce que j’ai fait dans mon exemple.
Et la suite ?
La suite, vous la connaissez. Si on réalise des événements au scroll, c’est du côté Javascript qu’il faut se tourner. Très clairement, j’ai dû un peu chercher ce qui existait sur la toile et je vous donne un code copié, mais retravaillé. Mais l’idée est simple, vous écoutez le scroll de la page, et si la hauteur de la fenêtre atteint le niveau le plus haut de la section ou des sections suivantes, vous regarder son « ID » que vous corrélez à l’ancre des liens de votre aside. S’ils correspondent, on change la classe.
Et comme un code vaut mieux qu’un long discours :
Pour terminer, voilà quelques exemples de liens actif :
Sur la documentation de Tailwind (dont je vous ai déjà parlé ici), le menu vertical qui se trouve en haut à droite à l’heure où j’écris cet article possède des liens actifs.
https://tailwindcss.com/docs/font-weight
C’est aussi le cas pour la documentation de Stripe (dont je vous ai aussi parlé ici)
https://stripe.com/docs/api/authentication
Dans les deux cas, on est face à de la documentation importante mais située sur une seule page. Dès lors, le visiteur peut rechercher ce qu’il veut avec un « CTRL + F« . Mais il peut aussi défiler la page pour lire l’entièreté de la documentation ou ce qui l’intéresse). Et grâce aux liens actifs, il sait à quel chapitre il est.
