jQuery : un menu qui suit l’utilisateur…

C’est, en terme d’expérience utilisateur, un petit plus intéressant, surtout si vous avez des pages assez longues.

Vous mettez en place un menu, généralement en haut de page, et l’utilisateur scrolle vers la suite. Fatalement, le menu disparaît rapidement, le forçant à remonter pour naviguer vers d’autres pages.

Pourquoi ne pas faire en sorte que le menu le suive, en restant visible? Pourquoi ne pas faire apparaître le bouton « remonter » sur le même principe?

Solution…

La structure html

Elle est relativement simple… pour l’exemple. A vous d’adapter si besoin.

<section>
     <header id="header">...</header>
     <nav id="nav">...</nav>
     <article>...</article>
</section>

Du côté de la CSS

Simple aussi… j’ai dépouillé au maximum, voir l’exemple pour la css complète…

header {
     height: 110px;
}
section {
     width: 960px;
     margin: auto;
}
#nav {
     background: #99acbd;
     width: 960px;
}

Que du classique. Ajoutons la classe qui fera le truc:

#nav.fixed {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    z-index: 99999;
}

Position fixed en top, et zindex… et une petite ombre facultative.

 Et le jQuery ?

Ben le voilà…

jQuery(document).ready(function(){
     $(window).scroll(function () {
          var rupture = $('#header').outerHeight() ;
          if( $(window).scrollTop() > rupture ) {
               $('#nav').addClass('fixed');
          } else {
               $('#nav').removeClass('fixed');
          }
     });
});

Rien de monstrueux non plus. Si on scrolle la fenêtre, le JS va vérifier si on a dépasser le point de rupture, c’est à dire la hauteur totale du header. En ce cas, on va pouvoir ajouter la class fixed, qui place notre #nav en fixe en haut (et donc toujours visible). Bien sûr, on doit la retirer si l’internaute remonte.

Notez que je recalcule la hauteur du header à chaque scroll, ce qui, à défaut d’être optimisé, permet de s’adapter en cas de site responsive (et donc avec un header à hauteur variable).

Sur le même principe (mais je vous laisse jouer), on pourrait faire apparaître un bouton « remonter » avec un lien vers #header par exemple, ou un footer avec des liens sociaux…

Ah, j’allais oublier: la démonstration!