12
DEC

Headroom.js - Un header dynamique Javascript pour vos pages web

Publié le 12/12/13 à 08h20 par DJo

Headroom.js est un script permettant de mettre en place un header dynamique sur vos pages web. Affichez / cachez le quand nécessaire.

Headroom.js est un script permettant de mettre en place un header dynamique sur vos pages web. Affichez / cachez le quand nécessaire.

Lorsque vous scrollez dans une page web, vous pouvez être amenés à persister la position du header avec le menu ou des informations importantes pour l'utilisateur.

Mais passé un certain niveau de scroll ce header peut disparaître pour laisser place à du contenu encore plus important.

Headroom.js est un script Javascript compatible à la fois avec jQuery, ZeptoJS et AngularJS.

Il permet de définir comment afficher et cacher votre header avec des effets CSS3:

Headroom.js démo header dynamique

A vous de choisir parmi les options du plugin:

  • Offset en pixel avant de cacher le header
  • Tolerance en pixel avant le déclenchement
  • Effet CSS3 pour afficher / cacher le header

 

Et au niveau du code, voici ce que ça donne avec jQuery:

$("header").headroom({
  "tolerance": 50,
  "offset": 600,
  "classes": {
    "initial": "animated",
    "pinned": "swingInX",
    "unpinned": "swingOutX"
  }
});
// to destroy
$("#header").headroom("destroy");

Et avec AngularJS:

<headroom tolerance='0' offset='0' classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

A vous de jouer !

 

Site Officiel

Baraguiné par 6_clicks le 13/12/13 à 13h04
6_clicks via Twitter
Super exactement ce que cherchais.... j'avais vu un effet du style sur le site wunderlist.
et j'avais kiffé!

merci... je le met dans les notes pour le prochain podcast de podsource

Merci

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web