Il y a quatre ans, Eric Bidelman a rédigé un article de blog plutôt génial sur le fait que position: sticky atterrit dans WebKit, qui était à l'époque le moteur de Chrome (ainsi que de nombreux autres navigateurs, y compris Safari). Un an plus tard, et au grand nombre de développeurs Web, nous avons supprimé position:sticky de Chrome, car "l'implémentation actuelle n'est pas conçue de manière à s'intégrer bien au système existant de défilement et de composition".
Nous avons toujours voulu la rétablir dans Chrome, comme l'indique le bug : "Une fois que nous avons organisé le défilement et la composition, nous devons revenir à position:
sticky et implémenter la fonctionnalité de manière à ce qu'elle s'intègre bien au reste du moteur". Le bug de méta qui suit l'implémentation est traité depuis 2013.
La bonne nouvelle, c'est qu'à partir de Chrome 56 (actuellement bêta en décembre 2016 et stable en janvier 2017), position: sticky est de retour dans Chrome.
Qu'est-ce que position:sticky ?
Il a fallu un certain temps pour en arriver là, alors pourquoi suis-je enthousiasmé par cela ?
position:sticky est un attribut de positionnement CSS qui vous permet de fixer un élément à la fenêtre d'affichage (c'est-à-dire de l'ancrer en haut de l'écran), mais uniquement lorsque son parent est visible dans la fenêtre d'affichage et qu'il se trouve dans la valeur seuil. Lorsqu'il n'est pas fixé à la fenêtre d'affichage, l'élément agit comme s'il était position: relative. Il s'agit d'un ajout très simple à la plate-forme, qui élimine la nécessité d'utiliser JavaScript dans un gestionnaire d'événements onscroll uniquement pour verrouiller un élément en haut de la fenêtre d'affichage.
Voici un exemple de blog. Cela me permet de garder l'en-tête de la section actuelle en haut de l'écran pendant que vous lisez mes articles plutôt longs et laborieux :\
Pour implémenter cette fonctionnalité, spécifiez que l'attribut position doit avoir la valeur sticky sur l'élément que vous souhaitez bloquer.
Vous pouvez également ajouter le décalage là où il doit être bloqué.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
L'exemple précédent corrigera l'élément <h3> à 10 pixels du haut de la fenêtre d'affichage. Pour le fixer directement en haut de la fenêtre d'affichage, vous devez définir l'attribut top sur top: 0px.
La prise en charge de cette fonctionnalité est assez importante. Il est disponible sur Chrome (yay),
Firefox et Safari. Voici plus d'informations sur position:sticky: