Formateur

Coder comme un PRO

Coder comme un PRO

Formateur Web depuis 11 ans dans la filière Webdesign, je vous propose de booster vos connaissances pour réaliser des sites web.

Cours par Webcam

Matières abordées

Niveaux

Contact

Vous êtes intéressez par la formation?
Contactez-moi.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Créer un menu sticky en javascript

Voici un effet bluffant et pourtant assez simple à mettre en place en javascript. Le principe est de fixer le menu en haut de l’écran lorsque l’on ‘scrolle’ vers le bas.

menu sticky
menu sticky

Commençons avec la structure HTML :

<header>Entete</header>
<nav>Menu</nav>
<div> lorem</div>
<div> contenu 3</div>
<div> contenu 4</div>
<div> contenu 5</div>
<div> contenu 7</div>
<div> contenu 8</div>
<div> contenu 9</div>
<div> contenu 10</div>
<div> contenu 11</div>
<div> contenu 12</div>
<div> contenu 13</div>
<div> contenu 14</div>
<div> contenu 15</div>

Le code HTML est simple et contient la balise <nav>. Et voici, à présent,  le code CSS qui ‘customise’ les éléments :

body{
  position: relative;
  font-family: verdana;
  background-color: rgb(236,240,241);
}
p{
  margin: 1em 0;
}
header{
  height: 100px;
  line-height: 100px;
  width: 100%;
  color: white;
  background-color: rgb(63,70,76);
  text-transform: uppercase;
  text-align: center;
}
nav{
  height: 50px;
  line-height: 50px;
  width: 100%;
  background-color: rgb(282,97,1);
  text-transform: uppercase;
  text-align: center;
  position: relative;
  color: white;
}
nav img{
  position: absolute;
  height: 50px;
  left: 30px;
  top: 0 ;
  border-radius: 20px;
  transition : all 1s ease;
}
div{
  height: 200px;
  width: 80%;
  margin: 0 auto;
  background-color: rgb(152,131,96);
  color: white;
  padding: 10px;
}

Aucune difficulté particulière concernant ce code! Maintenant intéressons nous au code Javascript.

Commençons par créer une fonction anonyme qui s’exécute au chargement de la page. Obtenez plus d’information sur les fonctions anonymes.

(function() {
 //script
})()

Puis ciblons l’objet HTML <nav> :

(function() { 
  // on cible l'objet nav
  let objNav = document.querySelectorAll("nav");
})()

Rajoutons le gestionnaire d’événement qui se déclenche quand on ‘scrolle’ et qui appelle la fonction  sticky:

(function() { 
  // on cible l'objet nav
  let objNav = document.querySelectorAll("nav");
  // evenement
  window.addEventListener("scroll", sticky);
})()

Mémorisons la position de l’objet nav, au chargement de la page, avec la propriété offsetTop :

(function() { 
  // on cible l'objet nav
  let objNav = document.querySelector("nav");
  // on mémorise la position de nav
  let memoPositionNav = objNav.offsetTop;
  // evenement
  window.addEventListener("scroll", sticky);
})()

Créons la fonction sticky :

function() { 
  // on cible l'objet nav
  let objNav = document.querySelector("nav");
  // on mémorise la position de nav
  let memoPositionNav = objNav.offsetTop;
  function sticky(){
    
  }
  // evenement
  window.addEventListener("scroll", sticky);
})()

Modifions le style CSS de nav en fonction de la différence de distance entre la position du scroll et le menu <nav>. En effet lorsque cette distance est inférieur à 1px, l’objet HTML <nav> passe en position fixed.

La position du curseur quand on ‘scrolle’ est donnée par la propriété pageYOffset de l’objet window :

// position du curseur au scroll
var posCurseur = this.pageYOffset;
// je teste la différence de distance entre le scroll et nav
if(memoPositionNav-posCurseur<1){
  objNav.style.position = "fixed";
  objNav.style.top = 0;
  objNav.style.zIndex = 999;
}
if(posCurseur<101){
  objNav.style.position = "relative";
}

Le code complet est le suivant :

(function() { 
  // on cible l'objet nav
  let objNav = document.querySelector("nav");
  // on mémorise la position de nav
  let memoPositionNav = objNav.offsetTop;
  function sticky(){
    // position du curseur au scroll
    var posCurseur = this.pageYOffset;
    // je teste la différence de distance entre le scroll et nav
    if(memoPositionNav-posCurseur<1){
      objNav.style.position = "fixed";
      objNav.style.top = 0;
      objNav.style.zIndex = 999;
    }
    if(posCurseur<101){
      objNav.style.position = "relative";
    }
  }
  // evenement
  window.addEventListener("scroll", sticky);
})()

Et voila un effet sympa que l’on retrouve sur beaucoup de site et qui n’est par forcément difficile à mettre en place. Nous n’avons pas besoin de recourir à un framework!

Testez sur Codepen ce code!

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »
MegaphoNews - Closer Than Ever

The leading news agency comes to your smartphone.  Download now.

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.