Sommaire

Une barre de navigation fixe avec les liens actifs PLUGINS JAVASCRIPT:Barre de navigation fixe avec les liens actifs

1. L’objectif

Nous allons reprendre le principe de la barre de navigation fixe, mais nous y ajoutons une fonctionnalité vraiment pratique. Quand nous ferons défiler la page, les liens de la barre de navigation vont s’afficher de manière active pour indiquer que nous avons atteint le titre correspondant au lien.

Retrouvez cet exemple dans le fichier Bootstrap-08-JavaScript/07-scrollspy.html.

2. La structure

Voici la structure de cette barre de navigation fixe avec les liens actifs.

images/C14-021.png

3. Le contenu

Le contenu de la page est placé dans une boîte <div class="col-md-10"> placée sur 10 colonnes sur la grille de Bootstrap.

Nous avons cinq titres <h2>. Chaque titre possède un identifiant id unique : <h2 id="un">, <h2 id="deux">...

Ces identifiants seront utilisés dans les liens de la barre de navigation.

4. La barre de navigation

La barre de navigation est placée dans une boîte <div class="col-md-2" id="manavbar">. Elle est placée sur deux colonnes sur la grille de Bootstrap.

Cette barre de navigation possède un identifiant unique id, manavbar. C’est cet identifiant qui va être utilisé pour la détection des liens lors du défilement de la page.

Tous les liens sont insérés dans une liste <ul class="nav nav-pills nav-stacked affix-top" ...