Des div toujours visibles avec Sticky, un plugin jQuery

Posté par seiyar81 le 5 juillet 2013 | Laisser un commentaire (1)
Sticky

Lorsqu’on développe des sites ou applications Web, on peut être amenés à vouloir garder une partie de la page toujours visible lorsqu’on scroll.
Que ce soit pour un effet esthétique ou pour une question de praticité comme avec une barre d’actions ou un menu de navigation par exemple.

Plusieurs manières existent pour réaliser cet effet, mais je parlerai ici d’un plugin jQuery : Sticky.

Ci-dessous un petit exemple d’un header toujours visible :

  Sticky
  
  
  
  

  
  

Une première div qui va disparaître.

Une deuxième div qui va disparaître.

Une troisième div qui va disparaître.

Nous centrons donc notre header en CSS et nous indiquons ensuite à Sticky via la propriété center:true que l’on souhaite qu’il reste centré une fois collé en haut de la page.

Sticky est léger et configurable via 5 options :

  • topSpacing: Pixels entre le haut de la page et le haut de l’élément
  • bottomSpacing: Pixels entre le bas de la page et le bas de l’élément
  • className: Classe CSS ajouté à l’élément et à son wrapper quand il est collé
  • wrapperClassName: Classe CSS ajouté au wrapper
  • getWidthFrom: Sélecteur d’un élément utilisé pour régler la largeur fixe de l’élément collé

Libre à vous d’utiliser le CSS que vous souhaitez pour placer/dessiner votre élément.

Pour récupérer le plugin ou y contribuer, direction Github.

Catégorie: Développement Web, Javascript | Laisser un commentaire (1)


Un commentaire pour “Des div toujours visibles avec Sticky, un plugin jQuery”

  • Bonjour et mercie pour vos conseil j’ai un petit soucie je concoit en ce moment un site E-Commerce avec Prestashop 1.6 et j’aimerais rendre mon menu du Header toujours visible lorsque on scroll je ne sais pas si vous pouvez m’aider

Laissez un commentaire