Sommaire

Une barre de navigation fixe PLUGINS JAVASCRIPT:Barre de navigation fixe

1. L’objectif

Bootstrap nous propose d’utiliser une barre de navigation originale : celle-ci va rester fixe dans la fenêtre du navigateur, même si vous faites défiler la page.

Retrouvez cet exemple dans le fichier Bootstrap-08-JavaScript/06-navfixe.html.

2. La structure

Voici la structure de cette barre de navigation fixe :

images/C14-018.png

Nous avons en tout premier lieu le conteneur Bootstrap <div class="container">.

Ensuite, nous positionnons deux boîtes <div> pour deux lignes : <div class="row">.

Dans la première ligne, nous plaçons un titre <h1> disposé sur les 12 colonnes de la grille : <h1 class="col-md-12">.

3. La barre de navigation

La deuxième colonne contient une première boîte <div> disposée sur trois colonnes : <div class="col-md-3">. Cette boîte contient une liste <ul>. Cette liste utilise les classes Bootstrap pour sa mise en forme : class="nav nav-list well". Cette liste <ul> utilise l’attribut Bootstrap data-spy="affix" qui indique que c’est cet élément qui doit être fixe. Le deuxième attribut data-offset-top="30" indique le seuil en pixel à partir duquel son élément doit être fixe quand vous faites défiler la page. Dans cet exemple, le seuil est de 30 pixels. Passé cette limite, l’élément ...