Fixer sa barre de navigation au scroll de la souris

Pourquoi fixer la barre de navigation au scroll de la souris ?

Effet de mode ou pas …  Vous avez peu être envie que votre barre de navigation soit toujours visible pour l’internaute qui navigue sur votre site. Voici une solution pour rendre visible votre barre de navigation visible, même si l’internaute est dans le bas de votre site.

A vous de jouer !

Comment fixer la barre de navigation?

On commence par localiser sa barre de navigation dans le code source

<div id='navigation'>
 Lien1 - Lien2 - Lien3
 </div>

Puis le style css correspondant

#navigation{
 background: #777777;
 height: 50px;
 }

On y ajoute une classe css avec les informations pour rendre votre barre de navigation fixe, au premier plan et en haut de la fenêtre du navigateur.

.fixNavigation{
 z-index: 9999;
 position: fixed;
 top: 0;
 /* Mise en forme */
 width: 900px; /* <-- Largeur de votre site */
 }

Ensuite on ajoute le lien vers le fichier JQuery (Bibliothèque JavaScript libre)

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Puis la fonction suivante

 $(function(){
 // On recupere la position du bloc par rapport au haut du site
 var position_top_raccourci = $("#navigation").offset().top;
 
 //Au scroll dans la fenetre on déclenche la fonction
 $(window).scroll(function () {
 
 //si on a defile de plus de 150px du haut vers le bas
 if ($(this).scrollTop() > position_top_raccourci) {
 
 //on ajoute la classe "fixNavigation" a <div id="navigation">
 $('#navigation').addClass("fixNavigation"); 
 } else {
 
 //sinon on retire la classe "fixNavigation" a <div id="navigation">
 $('#navigation').removeClass("fixNavigation");
 }
 });
 });

Vérifiez bien le nom des ID /Class dans votre css et dans le script JQuery Exemple: id=’navigation’ => #navigation

Un exemple !

Exemple pour fixer un menu de navigation
Màj : avril 2017