Sticky : cassiopeia extended ou comment fixer les colonnes
Avec Cassiopeia Extended (le template enfant natif introduit dans le noyau de Joomla), la mise en page repose sur le système de grille Grid CSS natif de Cassiopeia. [1]
Pour rendre les deux colonnes latérales fixes (sidebar-left / position-8 et sidebar-right / position-3), la propriété
position: sticky ne peut pas être appliquée directement sur les modules individuels de manière isolée. Le conteneur entier de la colonne doit adopter le comportement flexible pour s'aligner sur la hauteur de la zone centrale d'affichage (main). [1]Voici le code CSS précis à intégrer pour Cassiopeia :
1. Où ajouter le code ?
Dans Joomla 6, accédez à Système > Templates du site > Détails et fichiers de Cassiopeia_extended. Ouvrez ou créez le fichier
user.css situé obligatoirement dans le dossier css/ de votre template enfant. [1, 2]2. Le code CSS à insérer
Ajoutez les règles de ciblage structurelles suivantes pour figer vos colonnes :
css
@media (min-width: 992px) {
/* Aligne les conteneurs des barres latérales sur la hauteur totale de la page */
.site-grid {
align-items: start;
}
/* Rend fixe la colonne latérale Gauche (position-8) */
.sidebar-left {
position: sticky;
top: 30px; /* Distance par rapport au haut de l'écran lors du défilement */
z-index: 10;
height: max-content;
}
/* Rend fixe la colonne latérale Droite (position-3) */
.sidebar-right {
position: sticky;
top: 30px;
z-index: 10;
height: max-content;
}
}
Utilisez le code avec précaution.
Pourquoi l'instruction
@media est indispensable ?- Responsive design : Le comportement fixe (sticky) ne doit s'activer que sur les grands écrans (ordinateurs) où les colonnes sont affichées côte à côte.
- Écrans mobiles : Sur smartphone, Cassiopeia empile automatiquement les barres latérales en dessous ou au-dessus du contenu principal. Sans cette restriction
@media, vos colonnes s'écraseraient visuellement les unes sur les autres lors de la navigation sur mobile.
Avez-vous activé l'option Header collant (Sticky Header) dans les paramètres de votre style de template ? Si c'est le cas, il faudra augmenter la valeur
top: 30px; à environ top: 110px; pour éviter que le menu du haut ne masque le début de vos colonnes fixes. [1]Les réponses de l'IA peuvent contenir des erreurs. https://support.google.com/websearch?p%3Daimode&ved=2ahUKEwitjYW715yVAxWxUMMIHaSUBDQQx6APegYIAAgWEAE&opi=89978449&cd&psig=AOvVaw3U9QRbfpif7Q-_WpbNTDyF&ust=1782280787534000" data-processed="true" data-copy-service-computed-style="font-family: Google Sans, Arial, sans-serif; font-size: 14px; font-weight: 500; margin: 0px; text-decoration: underline dotted; border-bottom: 0px rgb(86, 89, 94);">En savoir plus