Cas pratique : animation sur un sommaire sticky
L’objectif est d’implémenter une animation à l’ouverture d’un sommaire ayant l’attribut position: sticky. Dans notre cas, la colonne de gauche apparait d’un coup. Celle-ci suit le scroll tout comme le header “Sommaire”. Le tout doit être responsive.
J’ai essayé plusieurs stratégies. A chaque fois j’ai eu des problèmes de compatibilité avec la position: sticky de la partie “Sommaire”. Cette particularité m’impose de travailler avec des dimensions fixes (en px et pas en %).
Dans tous les cas, j’ai commencé par séparer la partie “header” et la partie “summary”. Historiquement, il s’agissait d’un seul et unique bloc mais très vite, j’ai eu besoin de pouvoir gérer l’agencement de la colonne de gauche et de la documentation indépendamment du header.
1 — Left-to-right.
J’ai commencé par essayer d’imiter le fonctionnement du burger menu. J’ai donc caché le sommaire à gauche et je l’ai déplacé au moment ou celui-ci est ouvert par l’utilisateur. J’ai appliqué le même déplacement au bloc de documentation. Cette technique fonctionne mais implique la définition d’un overflow et d’une position: sticky sur le même élément ce qui n’est possible que lorsque l’on définit la hauteur de celui-ci de façon fixe.
Ici, nous ne pouvons présager de la longueur de la documentation, j’ai donc proposé une version avec un scroll interne au bloc de documentation qui n’a pas été retenu.
2 — Width grow
Etant donné que je ne peux pas avoir une div avec overflow qui contient une div sticky. J’ai tenté de jouer sur la largeur de la div contenant le sommaire. Cette stratégie implique une div qui fait office de masque pour la documentation. Celle-ci voit sa largeur s’adapter en fonction de celle du sommaire et contient une div avec cette fois-ci une largeur fixe. Le problème cette fois-ci, c’est que la largeur de la doc dépend de la largeur de la fenêtre, elle ne peut pas être défini de façon fixe.
3 — Mask overlapping
J’ai ensuite essayé d’exploiter le système de masque mis en place dans l’essai 2. J’ai tenté de mettre en place 2 container fixes et de faire bouger les contenus a l’intérieur de ceux-ci. Comme on ne peut pas spécifier un coté pour l’attribut overflow (overflow-right par exemple), il faudrait que les 2 containers soient superposés et je n’ai pas réussi à faire cohabiter un élément avec une position: sticky et un élément avec la position: absolute.
4 — Width & Mask
Pour mon essai final, j’ai mis en œuvre le point 2 et le point 3. J’ai utilisé ma technique de masque et j’ai opté pour une animation sur la width. J’ai ensuite fixé la largeur des div contenant le texte en à l’aide de media queries. Les blocs ne se redimensionnent pas dynamiquement mais c’est un contre-coup acceptable.
Et au final, le rendu respecte au mieux les exigences fixées.
