Beaucoup de sites Internet dispose d’un menu fixe. Lorsque vous scrollez vers le bas le menu reste visible en haut du site Internet.

Voici un exemple simple de création de menu fixe et surtout : comment changer son style lorsque l’on scroll.

Le menu

Nous allons créer un simple menu de site Internet en utilisant la propiété css de position sticky. Elle est supporté par presque tous les navigateurs actuel : Can I Use position:sticky

Grâce à cette propriété CSS, notre menu de site sticky devient fixe en haut du site Internet.

Extrait HTML avec le menu.

header.php
<header id="header-menu">
   <a href="#"> <img src="monlogo.jpg"/> </a>
   <ul>
      <li> <a href="#"> Accueil </a> </li>
      <li> <a href="#"> Services </a> </li>
      <li> <a href="#"> Contact </a> </li>
   </ul>
</header>

Fichier SCSS associé

header.scss
header {
   display: block;
   width: 100%;
   position: sticky;
   top: 0;
   z-index: 1020;
   padding: 30px 0;
   transition: all .6s ease;
}

Changer son apparence lors du scroll

Il est interessant de pouvoir changer l’apparence du menu dès que l’on commence à descendre dans la page. Cela nous permet de réduire la hauteur et la taille du header. Il empiète ainsi moins sur la zone visible de notre site Internet.

Pour avoir une transition fluide, nous allons utiliser l’API Intersection Observer de javascript. Cette API permet d’appeler une fonction lorsque l’on constate une intersection entre deux éléments.

Nous préférons utilisé l’Intersection Observer car il offre de meilleurs performances que les events listeners sur du onScroll ou onResize.

Notre problème est que notre menu ne sort jamais de l’écran car il est en position sticky.

Nous allons donc ajouter un élément dans le flux html juste avant notre menu. Et nous allons observer si cet élément sort de l’écran.
Si il sort de l’écran, c’est que nous avons commencé le scroll. Ce sera notre sentinelle.

Nous commençons donc par modifier le header en ajoutant notre sentinelle.

header.php
<div id="header-sentinel"></div>
<header id="header-menu">
   <a href="#"> <img src="monlogo.jpg"/> </a>
   <ul>
      <li> <a href="#"> Accueil </a> </li>
      <li> <a href="#"> Services </a> </li>
      <li> <a href="#"> Contact </a> </li>
   </ul>
</header>

Nous créons ensuite un fichier Javascript qui va surveiller notre sentinelle et ajouter une classe « enabled » à notre menu lorsque nous avons commencé le scroll. Et vis et versa.

header.js
window.addEventListener('load', function () {

   // On récupère les éléments dont nous avons besoin
   const headerSentinelEl = document.querySelector('#header-sentinel') // Le sentinel
   const headerEl = document.querySelector('#header-menu') // Notre menu

   // On défini ensuite une fonction qui permet en d'ajouter ou de supprimer la classe à notre menu
   // Si notre sentinel est hors écran, la classe "enabled" sera ajoutée
   const handlerHeaderIntersect = (entries) => {
       if (!entries[0].isIntersecting) {
           headerEl.classList.add('enabled')
       } else {
           headerEl.classList.remove('enabled')
       }
   }

   // On instancie ensuite l'intersection Observer en définissant la fonction de CallBack
   const headerObserver = new IntersectionObserver(handlerHeaderIntersect)

   // Et pour finir, on demande à notre Observer de surveiller notre sentinelle
   headerObserver.observe(headerSentinelEl)
})

On peut ainsi modifier notre code SCSS pour prendre en charge le changement de styles.

header.scss
header {
   display: block;
   width: 100%;
   position: sticky;
   top: 0;
   z-index: 1020;
   padding: 30px 0;
   transition: all .6s ease;
   
   &.enabled {
      box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
      padding: 8px 0;
   }
}

On espère que ce bout de code, vous aidera.

N’hésitez pas à nous contacter pour vos projets de développement sur mesure.