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.scssheader { 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.jswindow.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.scssheader { 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.