feat: des classes utilitaires pour placer des éléments en sticky dans le privé

Nb : pour l'instant c'est juste des classes mises à disposition, elles sont utilisées nulle part, c'est une autre question à voir par la suite.

Nb2 : rien à voir mais j'ai déplacé les règles css liées à ajax dans un ajax.css.html au passage.

---

C'est de l'amélioration progressive purement CSS.

Rappel : pour que ça fonctionne, le parent de l'élément doit avoir une taille supérieure à l'élément en sticky. Il ne doit pas y avoir d'ancêtre avec une règle overflow: hidden|auto

Les classes :

• .sticky, .sticky-top, .sticky-bottom : pour coller verticalement
• .sticky-start, .sticky-end : pour coller horizontalement
• .sticky-m-{n}, n étant un nombre de 1 à 3 : classe à combiner avec les précédentes pour ajouter un espacement

Pour les tableaux on peut également mettre des <th> en sticky. Les classes sont à mettre sur des lignes <tr>, cela évite d'avoir à les mettre sur chaque cellule. Les cellules doivent avoir un fond de couleur pour un rendu correct.

• .row-sticky-top : coller verticalement des <th> dans le <thead> ou le <tbody>
• .row-sticky-start : coller horizontalement des <th> dans le <tbody> uniquement

On peut combiner les 2 dans un même tableau.

Exemples

Garder visible un élément en colonne :

Lignes et colonnes d'un tableau :

Pour tester dans le confort de votre foyer vous pouvez par exemple ouvrir l'inspecteur et ajouter la classe .row-sticky-top dans le tr du thead d'une liste d'articles.