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
  • alice

    Bonjour, je n’arrive pas à faire fonctionner le code, est-ce que vous pouvez le mettre intégralement pour que je puisse voir si je l’ai mal placer ? Merci

    • Je vous laisse regarder l’exemple et prendre l’intégralité du code (CTRL+U sur Chrome).

    • fifi

      Bonjour Scoco
      super tuto, simple et précis.
      j’aimerais que la barre de navigation parte toujours du bas de la page, lors de l’ouverture, quelle que soit la taille de l’écran.
      Par avance merci,
      Fifi

  • GodZi

    Salut,
    je conseillerai de passer par une taille dynamique (si tu as un header dynamique la taille 150 fixée en dur n’est pas très adaptée) :
    // On récupère la position de ton bloc par rapport au haut du site
    var position_top_raccourci = $(« #navigation »).offset().top;
    $(function(){
    $(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction
    if ($(this).scrollTop() > position_top_raccourci) {
    ….

    • Commentaire pris en compte et intégré à l’article 😉 merci

  • Olivier

    Super tuto qui a fonctionné à la perfection pour ce qui me concerne !
    En revanche, si je spécifie une couleur particulière (avec la fonction background-color) sur la section #navigation et une autre sur la section .fixNavigation, uniquement la couleur spécifiée dans la section #navigation ressort après le scroll.

    Auriez-vous une idée ou une solution?

    En tout cas, bravo !

    • tac7

      Merci beaucoup c’est vraiment top.

  • Narek

    Meeeeeeeerci! J’ai poiroté 20 minutes parce que je n’avais pas changé les noms des IDs dans le script jQuery, veillez à bien séparer les commentaires « // Pour… » et le slogan du site à chaque copier/coller, sinon merci !!

  • Un grand merci !!
    Un tuto clair sans blabla ni rajout supplémentaire !
    mrci !!!

  • su-toto

    Hello !

    Le script est plutôt pas mal, en revanche dès qu’on passe a 300px ou plus, on remarque qu’on descend dans la div d’en dessous, même sur l’exemple on peut le constater, remarquez la 1ere ligne qui disparait lorsqu’on scroll.

    Une idée de comment régler ce problème ?

    • Yop

      Pourriez vous être plus précis svp.
      300px de scroll ?

  • debah

    Bonjour , merci , sa marche pour moi , par contre comment fixer le header egalement ? car je trouve que sa fait un peu mal au yeux du fait que lors du scroll c’est agressf la transitions… Merci 🙂

    • Pour fixer le header

      Ajout une classe .fixNavigation au DIV du header

      Puis ajouter une ligne dans la partie javascript
      $(‘#header’).removeClass(« fixNavigation »);//on retire la classe « fixNavigation »

  • DEGNY MICHEL

    Je ne sais comment vous remercier. Votre tuto m’a été très très très utile. Je cherchais quelque chose de simple à comprendre et intégrer. Merci en tout cas, ça marche chez moi.

  • Merci! Tuto très clair et très utile.
    Par-contre je ne sais pas pourquoi mais en copiant le script sur le tuto, les commentaires brouillaient le code. J’ai dû copier le script direct sur le code source de la page d’exemple. Mais à part ça, ça marche très bien 🙂

    • Je vais regarder çà, c’est vrai que c’est pas très « pratique » 😉

  • Bonjour

    je rebondi sur ce post car au-dela de fixer le menu en haut au scroll souris , j’aimerai qu ‘un couleur de fond soit appliquée au fond transparent en position normale ….
    a voir ici artboisconcept.com
    merci pour vos idées

  • Shukia

    Bonjour. Merci pour le tuto, je vais essayer de le mettre en place sur mon futur site.
    Mais il y a quelques choses que je ne comprend pas.
    J’aimerais que la barre de navigation ce trouve dans un premier temps en bas de la page. Où est-ce que je choisis la position initiale ?
    Merci pour votre aide!

    • Salut,
      Il suffit de mettre la DIV (id= »navigation » class= »fixNavigation ») dans le bas de votre site.

      Si vous souhaitez que le menu reste dans le bas du site

      .fixNavigation {
      z-index: 9999;
      position: fixed;
      bottom: 0; <-------- C'est ici 🙂 width: 900px;}

  • nicolas

    Merci pour ce tuto Scoco,

    Peux tu me dire comment insérer le sript Jquery ainsi que la fonction. (dans quel fichier)

    Je suis vraiment novice et j’aimerais que le menu soit géré de cette manière sur toutes mes pages.
    (mon site est un wordpress).

    Merci beaucoup.
    Nicolas

  • Bonjour,
    J’ai bien tout lu mais je n’arrive pas à le faire marcher.
    J’ai un doute avec l’ajout de « .fixNavigation »

    Voici ce que j’ai :

    CSS :
    #bande_horizontale{
    position: absolute;
    z-index: 9999;
    width: 100%;
    padding: 10px;
    margin: 0px;
    border: none;
    height: 15px;
    top: 190px;
    left: -2px;
    color: #FFFFFF;
    background-color: none;
    Background-repeat: repeat-x
    }

    .fixBande_horizontale{
    z-index: 9999;
    position: fixed;
    top: 0;
    width: 980px;
    }

    HTML
    Dans le

    Dans le

    $(function(){
    $(window).scroll(function () {
    if ($(this).scrollTop() > 0) {
    $(‘#bande_horizontale’).addClass(« fixBande_horizontale »);

    } else {
    $(#bande_horizontale’).removeClass(« fixBande_horizontale »);
    }
    });
    });

    Merci beaucoup pour votre retour !

    • Florent

      Bonjour,

      Je suis exactement dans le même problème que toi, j’ai bien tout mi comme il le fallait, et rien ne fonctionne…

      Cordialement.

      • Je vais regarder ce soir si le code source proposé est encore opérationnel. Je le modifiais si c’est bien le cas !

        • MlleLau

          J’essaie aussi désespérément mais cela ne fonctionne pas …

  • yaacoub

    je suis très contente d’avoir trouver ce script qui fonctionne bien.
    j’avais envie de faire ça depuis longtemps.

  • halima

    Merci beaucoup,j’avais envie de faire ça depuis longtemps. Merci encore une fois

  • Pingback: Web Lab()

  • Goudou Land

    hello,

    vraiment trés contente d’avoir trouver ton tuto qui fonctionne super bien pour se que je voulais faire. Enorme MERCI =)

    petit question : ma page doit d’être adaptable pour smartphone. Je voudrais que quand je suis en version smartphone la barre de navigation arrête de se fixer en haut. Aurais-tu une solution pour moi ^^?? merci bcp

    • Il faut regarder du coté des média query

      Exemple:

      Si la résolution de mon écran est inférieur à 480px alors je rend la barre de navigation statique .

      @media screen and (max-width: 480px) {
      .fixNavigation{
      z-index: 9999;
      position: static;
      top: 0;
      /* Mise en forme */
      width: 100%;
      }


      autre instruction

      }

  • Val

    Hello,

    L’idée est bonne, en revanche vu que tu utilise la même instance DOM de ton menu, elle sort de ton flux lorsque tu la place en « fixed » et du coup le reste de ton flux remonte (ca saute du visuellement coup).
    Pour corriger cela tu peux éventuellement dupliquer ton menu lors du scroll et ne positionner en fixed qu’un des deux, ou encore plus simplement avoir un conteneur supplémentaire de ton menu qui conserve une hauteur fixe.

    Tu pourrais aussi éviter d’avoir à rentrer la valeur de début de scroll manuellement (ici 150px).

    A plus ;o)

    • Salut,

      Merci du retour, je teste cela rapidement

      Bonne journée