Le positionnement sticky combine des aspects du positionnement relatif et du positionnement 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 adopte un comportement similaire à celui d’un élément positionné de façon fixe.

position: sticky;

Considérons l’illustration suivante. L’élément avec le contenu texte I am sticky utilise le positionnement sticky.

Lorsqu’un élément se trouve à l’intérieur d’un conteneur, et que ce conteneur reste dans la fenêtre d’affichage, l’élément se comporte 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 visible à l’écran. Une fois que le conteneur entier quitte la fenêtre d’affichage, le positionnement relatif est réactivé et l’élément disparaît de l’écran en même temps que le conteneur.

Passons à la pratique et créons quelques sections avec des titres sticky. Ainsi, l’utilisateur pourra toujours voir le titre de la section qu’il est en train de lire, puis celui-ci disparaîtra lors du défilement.

Remarque

Il est important de préciser la propriété top ou bottom, afin que le navigateur comprenne où l’on souhaite que l’élément reste collé.