position: sticky + inset: 0

Le mercredi après-midi au boulot, on profite d’un temps commun entre gens du même métier. (On appelle ça la guilde.) C’est l’occasion d’échanger sur des sujets divers, mais le plus souvent c’est basé sur le partage de connaissances et c’est tombé récemment sur le sujet de la position sticky.

Je ne vais pas refaire l’atelier ici, mais je constate souvent que cette méthode de positionnement est difficile à appréhender.

Personnellement j’aime imaginer une boîte dont le positionnement lui donne la capacité de glisser au sein de son conteneur (direct). Et ceci dans le but de rester le plus longtemps possible visible dans la zone scrollable la plus proche.
Par extension, il faut donc que le conteneur de la boîte positionnée ait une taille plus grande que celui-ci.

Après avoir parcouru avec mes collègues différents cas pratiques pour illustrer ce concept, j’ai regretté de ne pas avoir d’exemple montrant qu’on pouvait appliquer l’effet dans les quatre directions à la fois (top/bottom/left/right). Je savais que le concept fonctionnerait mais je n’arrivais pas à l’implémenter.

C’est ma collègue Nina qui m’a permis de débloquer l’idée et cela a abouti à ce CodePen. Je l’aime beaucoup car il réalise un comportement qui apparaît relativement magique au regard du nombre de lignes associé.

Sans rentrer dans les détails, voici un condensé des technologies mises en jeu :

• la position sticky pour que le point rouge soit toujours visible ;
• une variable CSS pour que les éléments puisse avoir les tailles relatives nécessaires ;
• une grille pour réaliser son conteneur avec une astuce sur ses couleurs de fond pour faire apparaître ses gouttières ;
• des scrollbars masquées visuellement (mais toujours présentes) quand cela est possible ;
• une gestion des dépassements sur la zone de défilement ;
• de l’adhérence sur le scroll pour que la vue se fige toujours sur certains alignements ;
• et une petite fonction JS pour initialiser la vue.