hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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 .

20+ Stickers muraux Creative Outlet et couvertures pour votre inspiration

20+ Stickers muraux Creative Outlet et couvertures pour votre inspiration

Avez-vous déjà regardé une prise de courant et remarqué que cela ressemble à un petit visage drôle qui essaie de vous dire quelque chose? En fait, vous n'êtes pas si loin que beaucoup de gens ont déjà trouvé des façons de décorer leurs points de vente avec des autocollants et des couvertures cool.Tout en s&#

(Conseils techniques et de conception)

Plus de temps de vacances pourrait-il améliorer votre productivité?  [30 pays comparés]

Plus de temps de vacances pourrait-il améliorer votre productivité? [30 pays comparés]

Le Japon, connu pour sa culture bourreau de travail, a fait la une des journaux lorsque son gouvernement envisageait d'adopter une loi obligeant ses travailleurs à prendre congé. Il y a beaucoup de raisons qui contribuent à une décision aussi radicale, y compris la pensée que cette initiative pourrait aider à relancer la croissance économique du Japon après des années de stagnation.est-ce v

(Conseils techniques et de conception)