Il y a quatre ans, Eric Bidelman a publié un article de blog plutôt génial sur le fait que position: sticky est arrivé dans WebKit, qui était à l'époque le moteur qui alimentait Chrome (ainsi que de nombreux autres navigateurs, y compris Safari). Un an plus tard, et à la grande consternation des 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 correctement au système de défilement et de composition existant".
Nous avons toujours voulu le réintégrer dans Chrome, comme indiqué dans le bug : "Une fois que nous aurons mis de l'ordre dans le défilement et la composition, nous devrions revenir à position:
sticky et implémenter la fonctionnalité de manière à bien l'intégrer au reste du moteur". Le bug méta qui permet de suivre l'implémentation est en cours de développement depuis 2013.
La bonne nouvelle est qu'à partir de Chrome 56 (actuellement en version bêta depuis décembre 2016, stable en janvier 2017), position: sticky est de nouveau disponible dans Chrome.
Qu'est-ce que la valeur position:sticky ?
J'ai mis un peu de temps à y arriver. Pourquoi suis-je si enthousiaste ?
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 de seuil. Lorsqu'il n'est pas fixé au viewport, l'élément se comporte comme s'il était position: relative. Il s'agit d'un ajout très intéressant et simple à la plate-forme qui élimine le besoin d'utiliser JavaScript dans un gestionnaire d'événements onscroll simplement pour verrouiller un élément en haut du viewport.
Voici à quoi cela ressemble sur mon blog. Cela me permet de conserver l'en-tête de la section en cours 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, euh, bloquer.
Vous pouvez également ajouter le décalage à l'endroit où il doit être collé.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
L'exemple précédent fixe l'élément <h3> à 10 pixels du haut du viewport. Pour le fixer directement en haut du viewport, définissez l'attribut top sur top: 0px.
Cette fonctionnalité est très bien prise en charge. Elle est disponible sur Chrome (yay), Firefox et Safari. Voici plus d'informations sur position:sticky: