Un élément sticky est un élément collant / épinglé qui reste fixe au scroll, c’est-à-dire lorsque l’on descend dans le contenu d’une page.
Depuis le menu Extensions > Ajouter, procédez à l’installation / activation de l’extension Sticky Menu (or Anything!) maintenant renommée Sticky Menu & Sticky Header.
Le nom d’une classe CSS (.maClass) ou d’un ID CSS (#monID) peut être retrouvé en faisant un clic droit dans son navigateur web, puis Inspecter.
Attention à bien sélectionner l’élément qui englobe tout (container) !
Depuis le menu Réglages > Sticky Menu (or Anything!) vous faut ensuite renseigner cette valeur dans le champ Sticky Element de l’onglet Basic settings.
Le menu est désormais fixe au scroll …
Quelques options supplémentaires vous permettront … :
- de rajouter de l’espace en pixel entre le haut de la page et l’élément sticky,
- de gérer la superposition des éléments via la logique de z-index,
- d’effectuer, via la logique de Push-up elements, la suppression de l’élément lorsqu’il a atteint un certain niveau dans la page (ex. le pied de page),
- de préciser un point de rupture, pour une taille d’écran exprimé en pixels, à partir duquel ne plus rendre sticky l’élément,
- ….
Limitation : une seule classe CSS peut être utilisée comme élément épinglé.
Quelques idées d’éléments qui peuvent être affichés en sticky :
- un menu de navigation,
- une barre de progression de la lecture d’un contenu,
- un bouton ou formulaire d’inscription à la newsletter,
- des boutons de partage sur les réseaux sociaux,
- une barre de recherche,
- des widgets,
- …
