Bannière collante

Une bannière collante dynamique. Au défilement de la page vers le bas, la bannière du haut disparaît ; elle réapparaît lors du défilement de la page vers le haut.

Règles d’implémentation pour l’accessibilité

Les règles d’implémentation de la bannière sont celles appliquées à une zone recevant l’entête et le menu principal de la page, à savoir :

• une région header avec le rôle aria role="banner" ;
• une zone de navigation principale nav avec le rôle aria role="navigation".

Visuel

Faites défiler la page vers le bas puis vers le haut et observez le comportement du bandeau supérieur contenant la navigation principale du site.

Extraits de code

Code HTML

<header role="banner" id="banner" class="noSticky">
	<nav role="navigation" aria-label="Menu principal">   
          <ul>
               <li><a href="">...</a></li>
               ...
          </ul>
	</nav>	
</header>

Code CSS

header[role="banner"].sticky {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  animation: fadein 1s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Code javascript

Au défilement de la page, le code javascript modifie la classe CSS da la bannière.

let lastScrollValue = 0;
document.addEventListener('scroll',() => {
    let top  = document.documentElement.scrollTop;
    document.getElementById("banner").className = lastScrollValue < top ? "noSticky" : "sticky";
    lastScrollValue = top;
});