Positionnement Sticky

Positionnement sticky combine des aspects des positionnements relatif et fixe. Lorsqu'un élément est positionné en sticky, il se comporte comme un élément positionné relativement jusqu'à ce qu'il atteigne un certain seuil sur la page. À ce moment-là, il passe à un comportement d'élément fixe.

Considérons l'illustration suivante. L'élément avec le contenu textuel I am sticky a le positionnement sticky.

Lorsqu'un élément est à l'intérieur d'un conteneur, et que le conteneur reste dans la fenêtre d'affichage, l'élément se comportera comme s'il était positionné relativement. Cependant, lorsqu'une partie du conteneur parent sort de la fenêtre d'affichage, l'élément devient fixe tant qu'une partie du conteneur reste à l'écran. Une fois que le conteneur entier sort de la fenêtre d'affichage, le positionnement relatif est réactivé, et l'élément disparaîtra de la vue avec le conteneur.

Faisons un peu de pratique et créons quelques sections avec des titres collants. Ainsi, un utilisateur pourrait toujours voir le titre de la section qu'il lit actuellement, puis il est censé disparaître au défilement.

Remarque

Il est important de mentionner que nous devons spécifier la propriété top ou bottom, afin que le navigateur puisse comprendre où nous attendons que l'élément se colle.