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

Masquage automatique des en-têtes ont été régulièrement populaires dans la conception web pendant un certain temps. De nombreux blogs et magazines en ligne utilisent l'en-tête collante pour garder les utilisateurs engagés et leur donner un accès direct à la navigation.

Moyen a redéfini cette fonctionnalité avec un concept de base cache la navigation tandis que défilement vers le bas mais le montre tandis que faire défiler. Ce concept est devenu un tendance très populaire et maintenant vous pouvez facilement répliquer en utilisant Headroom.js.

Headroom.js est un bibliothèque JavaScript gratuite vanille sans dépendances ni fonctionnalités excessives de l'API. Il vous suffit de l'ajouter à votre code HTML, de cibler l'en-tête de la page et de le laisser s'exécuter..

Espace libre simplement ajoute et supprime certaines classes CSS qui animent afin de afficher / masquer l'en-tête utiliser JavaScript pour détecter le mouvement.

Vous pouvez créer cette fonctionnalité vous-même, mais pourquoi s'en préoccuper? Headroom est testé et supporte tous les principaux navigateurs. Il même joue bien avec jQuery ou Zepto si vous avez déjà une bibliothèque JS installée sur votre site.

Tu trouveras beaucoup d'échantillons de code dans le repo GitHub mais voici un exemple simple qui cible le #entête élément:

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

le init () la fonction a beaucoup d'options à personnaliser. Vous pouvez personnaliser les différents classes d'éléments, avec différents rappels déclencheurs d'événements où vous pouvez intégrer vos propres fonctions. Par exemple, si vous voulez que l’élément disparaisse après son épinglage, vous utiliserez le onUnpin rappeler.

Ces options sont toutes répertorié sur la page principale du plugin, alors vérifiez-le et voyez ce que vous en pensez. Si tu veux voir Headroom en action regardez le stylo ci-dessous qui contient un clone complet de la page de démonstration principale.