Table des matières avec classe active des titres au scroll

Pour des longs articles ou pages de contenus, c’est toujours plus sympa d’avoir une table des matières qui reste à l’écran et qui montre où l’on se situe dans le contenu.

Étape 1 : installation du plugin

J’ai choisi dans ce cas un incontournable des tables des matières surtout que ce plugin permet de créer des widgets dans vos sidebars, shortcodes où voulez,,…

Table of Contents Plus

Étape 2 : Configuration et mise en place sidebar sticky

Une fois le plugin installé, vous le configurez via les réglages et vous l’affichez soit avec un widget dans votre sidebar qui pour que ce tutoriel vous soit utile se devra de rester apparente à l’écran.

Ce n’est pas le but de ce tutoriel donc si ce n’est pas le cas de votre thème, il va falloir vous y collez et faire un peu de CSS et d’HTML.

Voici un début de piste pour créer une sidebar sticky, terme consacré à cette fonctionnalité de rester à l’écran.

Pour avoir un peu galéré la première fois, je vous conseille cet article qui vous permettra de résoudre les écueils éventuels liés à une sidebar sticky. Dans mon cas, l’overflow était réglé à « hidden » sur un élément parent du DOM ce qui rendait le position: sticky inopérant… C’est râlant de perdre du temps sur ce genre de petites choses qui paraissent insignifiantes 😉

Étape 3 : Comprendre comment interagir avec la table des matières

Maintenant que votre table des matières fonctionne et reste à l’écran. Vous allez devoir intéragir avec Javascript pour ajouter une classe CSS sur vos niveaux de titres lorsque vous scrollez dans votre page.

Un script vaut mieux que de longues explications donc acte :

Ce sont les lignes 18 à 35 de la partie Javascript qui nous intéressent et qu’il vous faudra insérer dans votre code et l’adapter selon votre cas.

Ayant mis cela dans une sidebar que j’ai clairement identifiée avec le plugin sélectionné, voici ce que ça donne :

//jQuery init
jQuery(function($) {

     $(window).scroll(function() {
		var scrollDistance = $(window).scrollTop() + 50; // add distance to be sync between highlight and displaying headings text
	
		// Assign active class to sidebar links while scolling
		$('.contenu h2, .contenu h3').each(function(i) {
               if ($(this).position().top <= scrollDistance) {
                    $('.sidebar .toc_widget a.active').removeClass('active');
                    $('.sidebar .toc_widget a').eq(i).addClass('active');
               }
		});
     }).scroll();

}); // end function init jquery

Vous avez donc la class « .contenu » qui concerne la zone de votre texte entier. Essayez de cibler le plus précisément possible cette zone histoire que le script ne doive pas analyser le DOM de toute votre page ce qui sera inutile. La classe « .sidebar » cible la table des matières. Je cible ici uniquement les titres de niveau 2 et 3 car je n’utilise pas les niveaux inférieurs. Et si c’est votre cas, demandez-vous si c’est bien opportun 😉

Vous voyez aussi que j’ai ajouté un « +50 » à la distance de scroll. Selon le design de votre thème, il est possible que le matching entre l’ajout de la classe active et le scroll avec le niveau de titre dans votre texte se fasse un peu trop tôt ou un peu trop tard. Vous pourrez donc jouer avec ce réglage pour que ça fonctionne comme vous le désirez.

Étape 4 : Vos utilisateurs vous remercient

Et voilà, on y est. Vos utilisateurs peuvent maintenant profiter d’une lisibilité accrue de vos articles et peuvent naviguer d’un titre à l’autre très facilement et de manière plus ergonomique.