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.