StickyNav

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


Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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 !StickyNav

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é :   scrool   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 !
  • Pingback: [Tutoriel] CSS - footer en bas de page | Le Site de Paul Gruson()

  • Marc Issartel

    Bonjour,nnJe suis novice dans l’utilisation de javascript, et je n’arrive pas u00e0 faire fonctionner ce « sticky nav ». Comment fait-on le lien entre le code js et le reste de la page html?

    • p0k3

      Il faut ajouter ceci en bas de page HTML :nn

      • Marc Issartel

        Mercinu00c7a ne marche toujours pas, il y a quelque chose que je dois mal faire. Si je comprends bien, je peux aussi u00e9crire:nnnn taper ici le code JavaScript: $(window)….n

        • p0k3

          Oui, n’oubliez pas d’insu00e9rer JQUERY :nau dessus de nColler cette ligne :n

          • Marc Issartel

            u00c7a marche! Merci

      • carla

        Bonjour, dans votre lien le « monscript.js » ne doit-il pas correspondre u00e0 un fichier en local ? J’ai mis tous les liens que vous avez notifiu00e9 dans les commentaires mais u00e7a ne marche pas. J’ai la bibliothu00e8que JS en local et j’ai le lien web aussi. J’ai ajoutu00e9 votre lien mais rien n’y fait u00e7a marche pas.

        • p0k3

          Oui, ‘monscript.js’ fait ru00e9fu00e9rence u00e0 un fichier *.js de votre ordinateur (le chemin relatif)