Un client artisan boulanger, dont le site présentait une longue page unique listant ses créations saisonnières, souhaitait un en-tête qui reste visible en permanence pendant le défilement, avec le bouton de commande toujours accessible. Historiquement, ce genre d’effet demandait un peu de CSS en position: fixed couplé parfois à du JavaScript pour gérer les cas particuliers de superposition. Depuis la version 6.2 de WordPress, le bloc Groupe propose nativement un support de position collante, sans écrire la moindre ligne de script.
Cette fonctionnalité, discrète dans les notes de version, mérite qu’on s’y attarde tant elle simplifie un besoin pourtant très fréquent sur les sites vitrines et les boutiques en ligne.
Activer le support dans le thème
Le support de position n’est pas actif par défaut pour tous les thèmes blocs : il doit être explicitement déclaré dans le fichier theme.json du thème, sous la clé settings.position, avec la propriété sticky réglée sur true.
{
"version": 2,
"settings": {
"position": {
"sticky": true
}
}
}Une fois cette déclaration ajoutée et l’éditeur de site rechargé, le bloc Groupe affiche un nouveau réglage dans son panneau Paramètres, sous l’onglet Position, avec un choix simple entre position par défaut et position collante.
Mise en œuvre sur le header du site
Le bloc Groupe englobant le logo, la navigation et le bouton de commande a été réglé sur position collante, avec une valeur de décalage haut fixée à zéro pixel pour qu’il reste collé tout en haut de la fenêtre pendant le défilement. Le rendu, testé sur plusieurs navigateurs, s’est montré fluide et fidèle à ce qu’aurait produit une solution CSS manuelle, sans le moindre script supplémentaire à charger.
Les limites de compatibilité rencontrées
- À l’intérieur d’un conteneur ayant lui-même une propriété CSS
overflowdifférente devisible, comme un carrousel ou une zone de défilement horizontal imbriquée, la position collante ne fonctionne tout simplement pas, un comportement standard du CSS plutôt qu’une limite propre à WordPress. - Le comportement de superposition avec d’autres éléments collants sur la même page, comme une bannière de cookies elle-même en position fixe, doit être vérifié manuellement, WordPress ne gérant pas automatiquement l’ordre d’empilement entre plusieurs éléments collants indépendants.
- Sur un petit écran mobile, un en-tête collant trop haut peut réduire significativement l’espace de lecture utile ; un test réel sur téléphone reste indispensable avant validation finale.
Un test de performance rassurant
Contrairement à une solution reposant sur un script d’écoute du défilement en JavaScript, souvent responsable de petits ralentissements perceptibles sur les appareils plus anciens, cette implémentation native ne repose que sur une propriété CSS position: sticky générée automatiquement par WordPress. Aucun gestionnaire d’événement de défilement n’est ajouté à la page, ce qui explique l’absence totale de surcoût de script mesuré lors des tests de performance menés sur ce projet.
Le plus bel effet technique reste souvent celui qu’on ne remarque pas, parce qu’il ne coûte rien en performance. Un header collant sans JavaScript en est un exemple presque trop discret pour être remarqué.
Un point d’attention sur l’accessibilité
Un en-tête collant réduit en permanence la hauteur visible du contenu principal, un détail parfois négligé lors des tests sur grand écran. Sur ce projet, un utilisateur naviguant au clavier a signalé que le focus visuel de certains liens de navigation disparaissait partiellement sous l’en-tête collant lors du parcours par tabulation. La correction a consisté à ajouter une marge de défilement via la propriété CSS scroll-margin-top sur les ancres concernées, un ajustement mineur mais indispensable pour une navigation réellement accessible.
Notre verdict
Ce support natif de position collante mérite clairement de remplacer les anciennes solutions CSS ou JavaScript maison sur tout projet reposant sur un thème bloc à jour. Je recommande de systématiser sa déclaration dans theme.json dès la création d’un nouveau thème, tant le gain en simplicité et en performance est net comparé aux approches précédentes, à condition de ne jamais faire l’impasse sur la vérification d’accessibilité qui accompagne ce type d’effet visuel.
