# Position sticky natif du bloc Groupe : un header collant sans JS

> Livrer un en-tête qui suit le défilement grâce au support position du bloc Groupe, arrivé avec WordPress 6.2, et connaître ses limites de compatibilité.

- Auteur : Clément Hadrot
- Publié le : 2023-10-11
- Mis à jour le : 2023-10-11
- Catégorie : FSE
- URL : https://wpmoderne.dev.wordpress-developpement.fr/fse/position-sticky-natif-bloc-groupe-header-collant-sans-js/

## L’essentiel

- Aucun script JavaScript nécessaire pour ce comportement
- Le support doit être activé thème par thème dans theme.json
- Incompatible avec certains contextes de défilement imbriqués

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

> L'essentiel à retenir : Aucun script JavaScript nécessaire pour ce comportement ; Le support doit être activé thème par thème dans theme.json ; Incompatible avec certains contextes de défilement imbriqués

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 `overflow` différente de `visible`, 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.