Le positionnement “sticky” ou “collant” en CSS est une fonctionnalité assez pratique qui vous permet de faire “coller” un élément à l’écran, comme s’il était fixé, jusqu’à ce qu’il atteigne un certain point, puis qu’il continue à défiler normalement. C’est très utile pour les en-têtes de section qui peuvent rester visibles pendant que vous faites défiler le contenu de cette section.
Voici comment l’utiliser :
1. Tout d’abord, sélectionnez l’élément que vous voulez rendre “sticky”. Pour cet exemple, disons que nous avons un en-tête que nous voulons rendre collant :
\`\`\`html1. Ensuite, dans votre CSS, vous pouvez appliquer le positionnement sticky à cet élément en utilisant la propriété `position` avec la valeur `sticky` :
\`\`\`css #myHeader { position: sticky; } \`\`\`1. Par défaut, l’élément collant commencera à agir comme s’il était fixé au sommet de la fenêtre de visionnage. Vous pouvez changer cet emplacement en définissant la propriété `top`. La valeur que vous donnez est la distance à laquelle l’élément restera collé à partir du haut de la fenêtre de visionnage :
\`\`\`css #myHeader { position: sticky; top: 0; } \`\`\`Maintenant, votre en-tête devrait rester collé en haut de la page lorsque vous faites défiler le contenu.
Note: Le positionnement sticky peut ne pas fonctionner comme prévu si les parents overflow sont cachés ou si l’élément a des frères et sœurs avec des z-index plus élevés. Il est également pas encore pris en charge dans tous les navigateurs , vérifiez donc toujours la compatibilité des navigateurs avant d’utiliser ces nouvelles fonctionnalités CSS.
