Menu sticky intelligent (hide on scroll)

Ce snippet met en place un menu sticky fixé en haut de l’écran qui se masque automatiquement lors du scroll vers le bas et réapparaît dès que l’utilisateur scrolle vers le haut.

Le comportement repose sur :

une détection de direction de scroll (comparaison de la position actuelle et précédente),
un seuil de déclenchement pour éviter que le menu ne se cache trop tôt,
un filtrage des micro-mouvements (trackpad / inertie),
un reset forcé en haut de page pour garantir la visibilité après refresh ou retour en haut.
L’animation utilise transform et opacity pour des performances optimales (GPU), et le traitement du scroll est optimisé via requestAnimationFrame et un listener passive.

Résultat :
un menu fluide, stable, non intrusif, parfaitement adapté aux interfaces modernes et aux sites à fort focus UX en ajoutant la classe menu-sticky au container ou se trouve le menu

				
					<style>
.menu-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: transform 0.35s ease, opacity 0.25s ease;
  will-change: transform;
}
.menu-sticky.is-hidden {
  transform: translateY(-110%);
  opacity: 0;
}
</style>
<script>
(() => {
  const menu = document.querySelector('.menu-sticky');
  if (!menu) return;

  const TOP_RESET_PX = 5;     // zone "tout en haut"
  const HIDE_AFTER_PX = 80;   // on ne cache pas avant 80px
  const DELTA_PX = 6;         // évite le bruit (trackpad)

  let lastScroll = window.scrollY || 0;
  let ticking = false;

  const setVisible = () => menu.classList.remove('is-hidden');
  const setHidden  = () => menu.classList.add('is-hidden');

  const onScroll = () => {
    const y = window.scrollY || 0;
    const diff = y - lastScroll;

    // 1) Reset hard quand on est en haut
    if (y <= TOP_RESET_PX) {
      setVisible();
      lastScroll = y;
      ticking = false;
      return;
    }

    // 2) Ignore micro-mouvements (trackpad, inertie)
    if (Math.abs(diff) < DELTA_PX) {
      ticking = false;
      return;
    }

    // 3) Logique directionnelle
    if (diff > 0 && y > HIDE_AFTER_PX) {
      // scroll down
      setHidden();
    } else if (diff < 0) {
      // scroll up
      setVisible();
    }

    lastScroll = y;
    ticking = false;
  };

  window.addEventListener('scroll', () => {
    if (!ticking) {
      requestAnimationFrame(onScroll);
      ticking = true;
    }
  }, { passive: true });

  // Sécurité : au chargement / refresh en haut
  if ((window.scrollY || 0) <= TOP_RESET_PX) setVisible();
})();
</script>

Envie de laisser un commentaire ?