[Tutotoriel] CSS – Barre de navigation fixe (Sticky Nav)

Soyez sociable ! Partagez :

Une grande mode arrive dans sur internet, c’est la barre de navigation fixe que l’on retrouve sur des sites comme Melty ou Facebook… Cette barre est également appelée “Sticky Nav”

Nous allons voir ensemble comment obtenir une barre de navigation fixe sexy !

Sticky Nav ou Barre de menu Fixe

Structure HTML

Dans un premier temps, nous allons voir la structure HTML/CSS de notre template :

<div class="header">
    <h1>Salut le monde !</h1>
</div>
<div class="nav">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Tutoriel</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Sticky Nav</a></li>
    </ul>
</div>
<div class="main">
</div>

Et un peu de CSS :

.header{
    height:200px;
    text-align:center;
    line-height:200px;
    background:#faf2f3;
}

.nav{
    background:#f3f2f1;
    height:40px;
    margin-bottom:15px;
}
.nav ul li{
    float:left;
    list-style:none
}
.nav ul li a{
    line-height:40px;
    display:block;
    padding:0 10px;
}

.main{
    height:560px;
    background:#f8f9f6;
}

Pour la classe “main”, j’ai volontairement fixé le “height”, vous comprendrez plus tard.

Code javascript

L’objectif va être d’ajouter une classe à notre barre de navigation lorsque le scroll de la page dépasse une certaine valeur. Pour notre exemple,  cette valeur sera “200 pixels”, soit le moment où le header est complètement masqué :     On voit bien dans le schémas que le header est hors zone visible de l’écran. Au moment, ou cet événement se produit, on va ajouter une classe “fixed” à la barre de navigation.

$(window).scroll(function (event) {
    // A chaque fois que l'utilisateur va scroller (descendre la page)
    var y = $(this).scrollTop(); // On récupérer la valeur du scroll vertical

    //si cette valeur > à 200 on ajouter la class
    if (y >= 200) {
      $('.nav').addClass('fixed');
    } else {
      // sinon, on l'enlève
      $('.nav').removeClass('fixed');
    }
  });

Ensuite, il ne nous reste plus qu’à créer le code CSS pour indiquer que la barre de navigation doit toujours être en haut de l’écran :

.nav.fixed{
  position:fixed;
  top:0;
  z-index:1000;
}

Voilà, vous avez une sticky nav qui fonctionne.

Avoir un sticky nav plus sexy

Je vous l’accorde, on est loin de l’effet de melty… Vous savez cette effet de sticky nav qui apparaît quand le scroll est atteint ? Pour cela, nous allons utiliser un peu de CSS3 et la propriété transition :

.nav.fixed{
  transition-property: margin-top,margin-right;
  transition-duration: .5s,.1s;
  transition-delay: 0;
  transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
  -moz-transition-property: margin-top,margin-right;
  -moz-transition-duration: .5s,.1s;
  -moz-transition-delay: 0;
  -moz-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
  -o-transition-property: margin-top,margin-right;
  -o-transition-duration: .5s,.1s;
  -o-transition-delay: 0;
  -o-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
  -ms-transition-property: margin-top,margin-right;
  -ms-transition-duration: .5s,.1s;
  -ms-transition-delay: 0;
  -ms-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
  -webkit-transition-property: margin-top,margin-right;
  -webkit-transition-duration: .5s,.1s;
  -webkit-transition-delay: 0;
  -webkit-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);

  position: fixed;
  top:0;
  z-index:1000;
}

Bon, je vous l’accorde, c’est brut de décoffrage, et peu d’entre vous prendront le temps de comprendre comment fonctionne ce code. Mais pour ceux que ça intéressent, voici de la documentation : AlsaCréation. Lorsque vous allez scroller vers le bas, votre sticky nav devrait apparaître avec une animation sympas. Mon tutoriel sur Comment réaliser une sticky nav ou barre de navigation fixe est terminé, n’hésitez pas à me donner votre avis !

Soyez Sociable ! Partagez !