Créer un en-tête collant à masquage automatique avec Headroom.js

Auto-masquage des en-têtes ont été régulièrement populaires dans la conception de sites Web depuis un certain temps. De nombreux blogs et magazines en ligne utilisent l'en-tête adhésif pour fidéliser les utilisateurs et leur donner un accès direct à la navigation .

Medium a redéfini cette fonctionnalité avec un concept de base qui cache la navigation tout en faisant défiler vers le bas mais la montre en faisant défiler vers le haut . Ce concept est devenu une tendance très populaire et maintenant vous pouvez facilement le répliquer en utilisant Headroom.js .

Headroom.js est une bibliothèque JavaScript gratuite de vanilla sans dépendance ni fonctionnalités API excessives. Vous l'ajoutez simplement à votre code HTML, ciblez l'en-tête de la page et laissez-le s'exécuter.

Headroom ajoute simplement et supprime certaines classes CSS qui s'animent afin d' afficher / cacher l'en-tête en utilisant JavaScript pour détecter le mouvement.

Vous pourriez faire cette fonctionnalité vous-même, mais pourquoi s'embêter? Headroom est testé et prend en charge tous les principaux navigateurs . Il joue même bien avec jQuery ou Zepto si vous avez déjà une bibliothèque JS installée sur votre site.

Vous trouverez beaucoup d'exemples de code dans le repo GitHub mais voici un exemple simple qui cible l'élément #header :

 var myElement = document.querySelector ("# en-tête"); // crée un objet Headroom passant dans l'élément #header var headroom = new Headroom (myElement); // initialise la librairie headroom.init (); 

La fonction init() a beaucoup d'options à personnaliser . Vous pouvez personnaliser les différentes classes d'éléments, ainsi que différents rappels déclencheurs d'événements, dans lesquels vous pouvez intégrer vos propres fonctions . Par exemple, si vous souhaitez que l'élément se décolore après son décochéage, utilisez le rappel onUnpin .

Ces options sont toutes listées sur la page principale du plugin, alors vérifiez-la et voyez ce que vous en pensez. Si vous voulez voir Headroom en action, jetez un oeil au stylo ci-dessous qui contient un clone complet de la page de démonstration principale .