[★★★★☆][TUTO] Une barre de navigation fixée qui joue à chat !

Hello bande de poulpes ! Vous allez bien ? J'espère parce qu'aujourd'hui, je vais vous montrer comment réaliser un système permettant de cacher votre barre de navigation lors du scroll ! Le principe est simple ! Notre barre de menu se trouve en haut, fixée à notre page. Lorsqu'on scroll vers le bas, elle se cache mais laisse un liseret apparaitre. Si on survol ce liseret ou si l'on scroll vers le haut, la barre réapparait. Sweet non ?

Bon, assez de blabla, commençons à préparer tout ça ! (Un petit merci et les portes vers la magie du jQuery s'ouvriront à vous !)

La partie template

On va commencer par préparer toute la partie HTML. C'est ici que vous avez besoin des accès fondateur. Donc, on va commencer par aller dans overall_header et chercher la partie

Code:

{CSS}

On va ajouter la typographie utilisées pour ce tutoriel (Oswald Light) et donc on va ajouter ce bout de code en-dessous.

Code:

<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

Ensuite, on va chercher :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>

Cette partie, c'est notre barre de navigation générée par ForumActif. On remplace ce boût de code par

Code:

 <div class="mainMenu">{GENERATED_NAV_BAR}</div>

et on le place entre

Code:

<!-- END hitskin_preview -->

et

Code:

<!-- BEGIN switch_login_popup -->

De cette façon, on a notre barre de navigation qui se colle en haut à gauche de notre page d'accueil (ne vous inquiétez pas, on va rendre ça plus beau plus tard ~)

Pour conclure toutes ces modifications, on va chercher

Code:

{HOSTING_JS}

Et on va le couper ! Oui oui, j'ai bien dit le couper. On ne veut plus qu'il soit dans notre overall_header !



Oui oui, vous m'avez bien compris ! On ne le veut plus dans notre overall_header ! On va le déplacer !

D'ailleurs, et si on le faisait maintenant ? On va dans overall_footer_end, on cherche

Code:

</body>

et on colle notre {HOSTING_JS} juste au-dessus !

Explications:

Avec tout ça, nous en avons terminé avec le HTML (ouf n'est-ce pas ?). A dans 5 lignes pour la suite des aventures !

Le CSS

Il est tant de faire un ravalement de façade à notre barre de navigation !

Pour cela, pas de secrets, juste du CSS. Je vous donne le code directement (Je l'ai quand même commenté pour vous aider). Si jamais vous avez des questions dessus, n'hésitez pas !

Code:

/***********************************
*
* Notre barre de navigation
*
***********************************/
.mainMenu {
  position: fixed; /*Fixe le contenu*/
  top: 0; left: 0; /*Défini la position de la navigation*/
  z-index: 10; /*Permet de passer au dessus de tous les éléments*/
  width: 100%; /*Défini la largeur de la barre*/
  background: #1e1e1e; /*Couleur du fond*/
  padding: 10px 0; /*Pour éviter que le contenu ne colle en haut et en bas*/
  text-align: center; /*Centre le contenu*/
  border-bottom: 6px solid #00796b; /*Le petit liseret vert que l'on laissera déborder*/
  font: 300 1.5rem 'Oswald'; /*Notre sublime typographie !*/
  text-transform: uppercase; /*Met tout le texte en majuscule*/
  transition: all 0.7s ease; -moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; /*Permet d'adoucir la transition*/
}

/*C'est ici qu'il faudra jouer avec le -90% si vous désirez changer la taille de la barre et que le rendu ne correspond plus à vos attentes*/
.offMenu {
  transform: translateY(-90%); -moz-transform: translateY(-90%); -webkit-transform: translateY(-90%); /*Effet qui fait remonter la barre !*/
}

Pour vous expliquer grossièrement, la classe mainMenu corespond à l'aspect général de notre barre de navigation. La classe offMenu permet de cacher cette barre de navigation. C'est celle classe que nous allons ajouter en jQuery pour réaliser notre effet.
Bon, fini de vous faire patienter. Voici le moment que vous attendiez tous ! Le jQuery !

Le jQuery

On attaque le vif du sujet ! L'homme (ou plutôt la chose) qui nous permettra de réaliser l'effet souhaité remonte ses manches et nous montre ses superbe biceps ! Maître jQuery arrive ! On va commencer par créer un feuille javascript ( Dans le panneau d'administration, modules > HTML & Javascript > Gestions des codes Javascript. Pensez à activer la gestion des codes Javascript !). Une fois cela fait, on va créer notre fichier javascript. Nommez le comme vous le voulez, moi je l'appelle functions généralement mais c'est une préférence
Donc, avec le comportement décrit au tout début, on sait qu'il faut détecter les scrolls et le hover sur la barre de navigation. Nous allons donc commencer notre code !

On commence par réaliser une closure (une bonne pratique à prendre en jQuery, cela permet de ne pas salir inutilement notre objet window).

Code:

(function(){})();

Dans cette closure, on va commencer par récupérer notre barre de navigation, notre objet window (celui sur lequel on va écouter le scroll) et l'endroit de la page (au niveau de la hauteur) où nous nous trouvons actuellement (afin de vérifier si l'on va monter ou descendre).

Nous stockons la barre de navigation et la window dans des variables pour pouvoir y accéder plus rapidement ensuite (on évite de trop récupérer le HTML pour des soucis de performances)

Après cette étape, votre code devrait ressembler à ça :

Code:

(function(){
 var mainMenu = $('.mainMenu');
 var windowBrowser = $(window);
 var lastScrollTop = windowBrowser.scrollTop();
})();

Notre variable mainMenu contient notre navigation, windowBrowser contient notre window et lastScrollTop contient l'endroit où nous nous trouvons après notre dernier scroll (donc à l'initialisation, la hauteur où l'on commence. Si l'on vient d'arriver sur la page, elle est à 0)

Une fois tout cela fait, on va pouvoir faire notre fonctionnement au scroll. Pour cela, on va ajouter ce que l'on appelle un "écouteur d'évenement" à notre page. L'écouteur d'évenement réalisera la fonction qu'on lui défini lorsque l'action qui est associée est réalisée. Ici, notre action est le scroll. On ajoute donc cela à notre code :

Code:

windowBrowser.scroll(function(){});

Ici, on dit à jQuery "Si jamais tu détectes que l'utilisateur scroll sur ma page, tu réalises mon action". Ici, nous n'avons encore défini aucune action mais ça va venir !

D'ailleurs, et si on s'y attelait maintenant ? Voilà le fonctionnement : Quand un utilisateur scroll, on vérifie jusqu'où il scroll. Si ce scroll est supérieur à notre ancien scroll, cela veut dire qu'il est descendu. On va donc cacher notre menu. Sinon, c'est que ce scroll est inférieur et qu'il est monté. Il faut donc lui afficher notre barre. Pour mieux vous expliquer, voici un petit screen.

Avec ça, vous voyez bien que si l'on est à 250 et que l'on descend, notre nouveau scroll est à 450. Or 450 est bien supérieur à 250. Inversement, si l'on est à 250 et que l'on remonte, on va vers le 0. Et donc notre nouveau scroll est inférieur au précédent.

Comment ça se traduit dans le code ? Et bien c'est simple, comme ça !

Code:

(function(){
 var mainMenu = $('.mainMenu');
 var windowBrowser = $(window);
 var lastScrollTop = windowBrowser.scrollTop();
 windowBrowser.scroll(function(){
   var st = $(this).scrollTop();
   var offMenuLength = $('.offMenu').length;
   if (st > lastScrollTop+40){
       if(!offMenuLength) mainMenu.addClass('offMenu');
   } else if(st+40 < lastScrollTop) {
      if(offMenuLength) mainMenu.removeClass('offMenu');
   }
   lastScrollTop = st;
 });
})();

Je définis st comme étant mon nouveau scroll. offMenuLength me sert simplement en terme de performance (en gros, je regarde la taille de l'objet $('.offMenu') pour savoir s'il existe ou non une balise avec la classe offMenu dans ma page. Cela permet d'éviter de faire du code pour rien). Si st est supérieur à lastScrollTop+40 (notre ancien scroll + une petite valeur pour éviter que l'on ne cache le menu pour un tout petit scroll) et bien j'ajoute à ma navigation la classe offMenu (si ce n'est pas déjà fait). Le if(!offMenuLength) est là pour vérifier qu'on a pas déjà ajouter la classe à notre navigation. Sinon, j'enlève la classe ce qui permet de le réafficher. Facile non ?

Allez, restez avec moi, on est presque à la fin ! Actuellement, on a presque tout notre code. Il ne reste qu'une chose : Faire en sorte que la barre se réaffiche si jamais on passe dessus. Pour cela, on va, je vous le donne dans le mille, ajouter un autre écouteur d'évenement !

L'écouteur cette fois-ci se nomme mouseenter (la dernière fois, c'était scroll). Le but : je passe sur ma barre --> Je lui enlève la classe offMenu pour qu'il réaparaisse. Cela se présente sous cette forme :

Code:

mainMenu.mouseenter(function(){
 if($('.offMenu').length) mainMenu.removeClass('offMenu');
 });

Et voilà, avec tout ceci, vous avez desormais toutes les clés en main. Si vous avez bien compris le tutoriel, votre code devrait être comme cela :

Code:

(function(){
 var mainMenu = $('.mainMenu');
 var windowBrowser = $(window);
 var lastScrollTop = windowBrowser.scrollTop();
 windowBrowser.scroll(function(){
   var st = $(this).scrollTop();
   var offMenuLength = $('.offMenu').length;
   if (st > lastScrollTop+40){
       if(!offMenuLength) mainMenu.addClass('offMenu');
   } else if(st+40 < lastScrollTop) {
      if(offMenuLength) mainMenu.removeClass('offMenu');
   }
   lastScrollTop = st;
 });
 mainMenu.mouseenter(function(){
 if($('.offMenu').length) mainMenu.removeClass('offMenu');
 });
})();

Pratique, ça me permet aussi de donner le jQuery complet à ceux qui ont laché entre temps !

J'espère que vous avez apprécié ce tutoriel et qu'il vous aura été utile. N'hésitez pas à poser la moindre question ! S'il y a quelque chose que vous ne comprennez pas, dites vous que vous n'êtes sûrement pas le/la seul(e). Je m'efforcerais à ce moment là à ré-expliquer en détail tout le code.

Divers ajouts

SweetGumiho a écrit:

Serait-il possible de faire que lorsque l'on n'est plus tout en haut du forum la barre de navigation n'apparaisse que lorsque l'on place la souris en haut de la page et disparaisse si celle-ci n'y est pas ? Merci bien.

Code:

(function(){
  var mainMenu = $('.mainMenu');
  var windowBrowser = $(window);
  var lastScrollTop = windowBrowser.scrollTop();
  function actDependingScroll() {
    var st = windowBrowser.scrollTop();
    var offMenuLength = $('.offMenu').length;
    if (st > lastScrollTop+40){
      if(!offMenuLength) mainMenu.addClass('offMenu');
    } else if(st+40 < lastScrollTop) {
      if(offMenuLength) mainMenu.removeClass('offMenu');
    }
    lastScrollTop = st;
  }
  windowBrowser.scroll(actDependingScroll);
  mainMenu.mouseenter(function(){
    if($('.offMenu').length) mainMenu.removeClass('offMenu');
  });
  mainMenu.mouseleave(function(){
    if(!$('.offMenu').length && windowBrowser.scrollTop() != 0) mainMenu.addClass('offMenu');
  });
})();

Merci et à très bientôt !