Fixer un menu au défilement

12.02.2014

Pour fixer simplement votre menu, vous pouvez utiliser la propriété "position: fixed;" en CSS. En revanche, si votre menu est par exemple placé sous le header, vous voudriez pouvoir le fixer seulement une fois qu'il se trouve en haut de la page.
Pour cela, il faut utiliser du JavaScript.

/!\ Le JS doit être activé sur votre blog

Commencez par créer votre menu en HTML (définissez le par un ID) , et placez le dans un module simple.

<div id="menuNavigation">MON MENU, AVEC DU TEXTE, DES LIENS ET DES IMAGES</div>

Grâce au css, vous allez pouvoir le placer où vous voulez sur votre page, et modifier sont apparence. Dans cet exemple, je vais le placer sous mon #header, d'une hauteur de 250px.
Placez le en "position: absolute;"
=> [Tuto] Contenu hors des articles

#menuNavigation { position: absolute;
top: 250px; /*hauteur du header*/
width: 800px; /*largeur du menu*/
left: 50%; /*place le bord gauche au centre*/
margin-left: -400px; /*décale la moitié du menu vers la gauche pour le placer au centre*/
propriété : valeur;
}

Nous avons maintenant besoin de définir sont apparence quand il doit être "fixe". Je vais donc simplement ajouter une classe à mon id, et le définir en "position:fixed" (pour le fixer), ainsi qu'en "top: 0px;" pour le coller en haut de la page. Vous pouvez bien sûr ajouter d'autres propriétés pour changer sont apparence.

#menuNavigation.fixe { position: fixed;
top: 0px;
propriété : valeur;
}

Maintenant, passons au javascript, que vous placez dans le même module que votre menu.
Un script JS se place toujours entre les balises <script> JS </script>
Nous allons utiliser window.onload pour exécuter notre script à la fin du chargement de la page.

Commençons par définir nos variables : nous auront besoin bien évidemment de notre #menu, et si vous ne voulez pas vous embêter à calculer quand il doit se fixer, nous allons également récupérer #header.

window.onload=function(){
var menu = document.querySelector("#menuNavigation");
var header = document.querySelector("#header");
}

Nous devons ensuite récupérer la taille de la fenêtre du client, et savoir de combien il a "scrollé" la page.

function scrolled(){
var windowHeight = document.body.clientHeight,
currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
}

Sachant cela, nous pouvons changer la classe de notre menu si la page a été "scrollée" de la hauteur du header. Toujours dans la fonction "scrolled" on ajoute l'instruction suivant :

menu.className = (currentScroll >= header.offsetHeight) ? "fixe" : "";

menu, c'est la variable représentant notre #menu.
className est une commande JS permettant de modifier la classe d'un élément. Ici, nous ajoutons la classe .fixe à #menuNavigation
currentScroll est le défilement de la page (scroll)
header est la variable représentant #header
offsetHeight est une commande permettant de récupérer la hauteur d'un élément (ici #header)

Pour traduire cela, si le défilement de la page est supérieur ou égal à la hauteur du #header, la classe de #menuNavigation devient .fixe
Notre menu prend donc les paramètres de #menu.fixe

Pour finir ce code, nous devons ajouter un EventListener, sans quoi nous ne pouvons pas récupérer le défillement (scroll) de la page.

addEventListener("scroll", scrolled, false);

Voici le JS complet

L'exemple ici est de fixer un menu en fonction du défilement de la page, mais vous pouvez utiliser cette technique pour modifier n'importe quel élément en fonction de votre position sur la page ;)