Fixer son menu en haut

Beaucoup de sites permettent aujourd’hui de garder sous les yeux le menu, pour une meilleure navigation. Quel que soit l’endroit où vous êtes sur la page, même après avoir scrollé (l’internaute fait tourner sa roulette de la souris), le menu reste accessible. Cela est très pratique et permet une meilleure navigation du site.

Pour le mettre en place, il faudra utiliser du javascript lié  à un fichier css.

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

.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)

Puis la fonction suivante

// $(function(){
$(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction
if ($(this).scrollTop() > 150) { //si on a défilé de plus de 150px du haut vers le bas
$(‘#navigation’).addClass(“fixNavigation”); //on ajoute la classe “fixNavigation” à
} else {
$(‘#navigation’).removeClass(“fixNavigation”);//sinon on retire la classe “fixNavigation” à
}
});
});
// ]]>


Un exemple sur ce site