Sticky header : définition, fonctionnement et impact UX
Sticky header : définition, fonctionnement en CSS avec position:sticky, effet sur la navigation et les conversions, et erreurs à éviter sur votre site.
Sticky header : la définition
Un sticky header est un en-tête de site web qui reste collé en haut de la fenêtre lorsque l'internaute fait défiler la page. Le logo, le menu de navigation et souvent un bouton de contact restent donc visibles en permanence. En français, on parle aussi d'en-tête collant ou de menu fixe. Le mot vient de l'anglais sticky, « collant » : on dit que l'élément « sticks », qu'il adhère au bord de l'écran.
À quoi sert un en-tête collant ?
Sur une page longue, le visiteur qui veut changer de rubrique ou vous appeler doit d'ordinaire remonter tout en haut. Avec un sticky header, il retrouve le menu et le bouton d'appel à l'action où qu'il soit dans la page. Pour une PME, l'intérêt est direct : plus le contact demande peu d'effort, plus la demande de devis a de chances d'arriver.
- Une navigation plus rapide entre les pages, sans revenir en haut.
- Un bouton « Demander un devis » ou un numéro de téléphone toujours visible.
- Un repère de marque permanent grâce au logo.
- Une meilleure orientation sur les pages longues : fiches services, articles, catalogues.
Il fait partie d'une réflexion plus large sur l'expérience utilisateur : chaque élément qui reste à l'écran doit mériter la place qu'il occupe.
Comment fonctionne un sticky header ?
Avec position:sticky en CSS
La méthode moderne tient en deux déclarations sur la balise header : position: sticky et top: 0. L'en-tête se comporte d'abord comme un élément normal, puis se fige dès que le défilement l'amène en haut du viewport, c'est-à-dire la zone visible du navigateur. On ajoute en général une couleur de fond (background) opaque et un z-index, pour que le contenu ne passe pas par-dessus. Attention : le positionnement sticky ne marche pas si un div parent porte overflow: hidden. C'est un piège très courant.
La différence avec position:fixed
Avec position:fixed, l'élément sort du flux de la page et reste collé à l'écran dès le chargement. Il faut alors ajouter une marge en haut du contenu, sinon le header cache les premières lignes. Le sticky garde sa place dans le flux, et c'est pour cela qu'on le préfère aujourd'hui pour les en-têtes.
Dans WordPress, Elementor ou Divi
Les constructeurs de pages ont une option prévue pour ça. Dans Elementor, on active l'effet sur la section d'en-tête. Astra, Kadence, Divi et Bricks Builder ont des réglages équivalents dans leur éditeur d'en-tête, selon la version utilisée. Derrière l'interface, c'est le même CSS, parfois complété par du JavaScript pour réduire le header pendant le défilement.
L'impact sur l'UX et la conversion
Un en-tête collant bien pensé enlève des frictions, ce qui peut faire monter votre taux de conversion. Mais ce n'est pas automatique : tout dépend de vos pages et de vos objectifs. Pour trancher, il faut mesurer, par exemple avec un test A/B entre une version avec en-tête collant et une version classique.
Sur mobile, la question compte encore plus. Un header trop haut réduit la place laissée à la lecture sur un petit écran. D'où l'intérêt d'un design responsive qui adapte la hauteur de l'en-tête, ou le masque quand le visiteur descend et le fait revenir quand il remonte.
Les erreurs courantes à éviter
- Un header si haut qu'il prend un quart de l'écran mobile.
- Un fond transparent qui rend le menu illisible au-dessus des photos.
- Une animation saccadée au défilement, qui donne une impression de lenteur.
- Des liens d'ancre mal réglés : le titre visé passe sous l'en-tête. La propriété scroll-margin-top corrige ce problème.
- Un menu qu'on ne peut pas utiliser au clavier, ou un contraste insuffisant, contraire aux règles d'accessibilité RGAA.
- Trop d'éléments fixes en même temps : bandeau cookies, fenêtre de chat, barre promo et header.
Le bon réflexe : ne garder que l'essentiel, soit le logo, le menu et un seul appel à l'action. Lors d'une création de site internet, nous testons ce comportement sur de vrais téléphones avant la mise en ligne.
Questions fréquentes
C'est un en-tête de site qui reste visible en haut de l'écran pendant le défilement. Il contient en général le logo, le menu et un bouton d'action. Il permet de rejoindre le menu sans remonter, surtout sur les pages longues.
position:sticky laisse l'élément dans le flux, puis le fige quand il atteint la valeur de top définie. position:fixed le colle à l'écran dès le départ et le sort du flux, ce qui oblige à compenser sa hauteur. Pour un header, sticky est souvent plus simple à maintenir.
La plupart des thèmes et des constructeurs, comme Astra, Kadence, Elementor ou Divi, ont une option d'en-tête collant dans leurs réglages. Sinon, trois lignes de CSS sur la balise header suffisent : position: sticky, top: 0 et un z-index. Vérifiez ensuite qu'aucun conteneur parent ne bloque l'effet avec overflow: hidden.
