Sticky : une valeur pot de colle
Un abonnement sur mon twitter-X et/ou youtube serait fortement apprécié.
Dernière mise à jour : mars 2024
Introduction
La valeur sticky de la propriété position a été ajoutée à CSS Positioned Layout Module Level 3. Pour rappel, il existe plusieurs valeurs à cette propriété :
- -
static(par défaut) - -
relative - -
absolute - -
fixed - -
sticky
On va seulement s'intéresser à cette dernière valeur : sticky. Partons sur l'idée que vous connaissez les autres valeurs. Dans la cas contraire, vous pouvez vous renseigner sur ces valeurs.
Le positionnement collant va permettre à un élément de rester visible pendant que l'utilisateur fait défiler la page ou le conteneur dans lequel se trouve l'élément collant, puis adopte une position fixe lorsque l'élément atteint une distance spécifique (en haut, bas, gauche ou droite) de la fenêtre de défilement.
Construire un menu collant :
Ci-dessous une mise en pratique de la valeur sticky sous forme de menu. Faites défiler le contenu via la barre (le scroll) sur le côté, vous constaterez alors que le menu reste collé en haut de la page.
Lorsque vous utilisez le modèle de disposition Grid layout conjointement au positionnement sticky,
Voir le même exemple en JavaScript :
Empilement de contenu :
Un exemple qui "colle" parfaitement avec la valeur sticky : l'empilement.
Tableau position sticky
