Header sticky : CSS position: sticky et masquage au scroll
Guide du header sticky
Header sticky en CSS : position sticky, rétrécir, masquer au scroll | We.Inc
Créez un header sticky avec position: sticky, puis ajoutez le rétrécissement et le masquage au scroll. Démo en direct, décalage des ancres avec scroll-margin, corrections de z-index et un petit hook React.
Donnez au header position: sticky et top: 0, plus un fond et un z-index, et il reste épinglé pendant le défilement de la page. Il ne reste collé qu'à l'intérieur de son parent, et un ancêtre avec overflow défini peut l'en empêcher. Pour un header qui se masque au scroll, basculez une classe translateY depuis un écouteur de scroll.
sticky ou fixed pour les headers
position: sticky
position: fixed
Occupe de la place dans la mise en page
Oui
Non, ajoutez un padding au body
Épinglé par rapport à
L'ancêtre défilant le plus proche
Le viewport
Nécessite un inset comme top: 0
Oui, sinon il se comporte comme relative
Généralement
Crée un contexte d'empilement
Oui
Oui
S'arrête à la fin de son parent
Oui
Non
Un header sticky tient en une ligne de CSS, jusqu'au moment où ça ne suffit plus : le header refuse de rester collé, les liens d'ancre atterrissent dessous, ou un menu déroulant passe derrière le contenu. Cette page couvre la ligne de CSS, puis chacun de ces problèmes, avec une démo de défilement en direct où vous pouvez passer du mode simple au mode rétréci ou masqué.
Faites défiler le contenu de la boîte de démo. Le header est sticky par rapport à cette boîte, de la même façon qu'un vrai header reste collé à la page.
Passez en mode rétrécissement ou masquage au scroll et faites défiler à nouveau dans les deux sens.
Cliquez sur un lien de section dans la démo pour voir scroll-margin-top garder le titre dégagé du header.
Copiez le CSS et le hook qui correspondent au mode souhaité.
Si sticky ne fait rien, cherchez un ancêtre avec overflow: hidden, auto ou scroll. Le header reste alors collé à cette boîte plutôt qu'à la page.
Un élément sticky ne peut pas quitter son parent. Placez le header directement dans body ou dans un conteneur aussi haut que la page.
Donnez au header un fond opaque ou légèrement translucide, sinon le contenu apparaîtra à travers pendant le défilement.
Définissez scroll-padding-top sur html à la hauteur du header pour que chaque lien d'ancre et chaque élément focalisé s'arrête en dessous.
Respectez la réduction des animations : supprimez l'animation de glissement pour les personnes qui ont demandé moins de mouvement.
Questions fréquentes
Pourquoi mon position: sticky ne fonctionne-t-il pas ?
Trois causes habituelles : aucune valeur d'inset comme top: 0, un parent qui se termine juste après le header si bien qu'il n'a pas la place de rester collé, ou un ancêtre avec un overflow autre que visible, qui devient la boîte à laquelle le header se colle. Vérifiez-les dans cet ordre.
Un header doit-il être sticky ou fixed ?
Sticky est plus simple car il garde sa place dans la mise en page, donc rien ne saute en dessous en haut de la page. Fixed est utile quand le header doit se superposer à un hero plein écran, mais vous devez alors ajouter vous-même un padding à la page.
Comment empêcher les liens d'ancre de se cacher sous un header sticky ?
Ajoutez scroll-padding-top au conteneur défilant, généralement html, avec une valeur égale à la hauteur du header. Pour des cibles ponctuelles, vous pouvez plutôt mettre scroll-margin-top sur le titre lui-même.
Pourquoi mon menu déroulant apparaît-il derrière le contenu de la page ?
Le positionnement sticky crée un contexte d'empilement, donc tout ce qui se trouve dans le header ne peut s'empiler qu'à l'intérieur de celui-ci. Remontez le header lui-même avec un z-index supérieur au contenu qui suit, par exemple z-index: 50, plutôt que de remonter le menu déroulant.
Comment sticky fonctionne vraiment
Un élément sticky démarre dans le flux normal. Dès que le défilement l'emporterait au-delà de son inset, top: 0 pour un header, il conserve cette position jusqu'à ce que le bas de son parent arrive et le repousse.
La boîte à laquelle il se colle est l'ancêtre le plus proche doté d'un mécanisme de défilement, ce qui inclut overflow: hidden. C'est pourquoi un conteneur ajouté pour rogner un carrousel peut discrètement casser un header situé bien plus loin.
Masquer en descendant, afficher en remontant
Comparez la position de défilement actuelle avec la précédente. Descendre au-delà d'un petit seuil masque le header avec transform: translateY(-100%) ; tout mouvement vers le haut le fait revenir.
Animez transform plutôt que top ou height, car un transform ne déclenche pas de recalcul de mise en page. Écoutez le scroll avec l'option passive pour que le navigateur n'attende jamais votre gestionnaire.
Rétrécir sans sauts de mise en page
Modifier la hauteur du header pendant qu'il est sticky déplace le contenu situé dessous. Gardez la hauteur extérieure fixe et réduisez le logo avec transform: scale, ou diminuez le padding à l'intérieur d'un header qui est déjà hors du flux.
Un attribut data comme data-scrolled sur le header garde les règles de style dans le CSS et réduit le script à une seule ligne.
Le header sticky de base
Header sticky dans une page qui défile
Faites défiler le cadre. Le header reste en haut et le lien d'ancre s'arrête en dessous grâce à scroll-padding-top.
Masquer en descendant, afficher en remontant
CSS des états masqué et rétréci
Le script ne fait que définir des attributs data. Tous les changements visuels sont dans le CSS.
Hook React : useHideOnScroll
Renvoie deux booléens que vous pouvez appliquer au header comme attributs data. Le seuil de 8px ignore les petites secousses.
Les pièges du header sticky
Symptômes et corrections
Symptôme
Cause
Correction
Le header défile avec la page
Pas de valeur top
Ajoutez top: 0
Le header défile avec la page
Un ancêtre a overflow: hidden
Déplacez overflow sur un conteneur plus petit, ou utilisez overflow: clip
Reste collé, puis part trop tôt
Le parent est trop court
Placez le header dans body ou dans un conteneur pleine hauteur
Titres d'ancre masqués
Pas de décalage de défilement
scroll-padding-top sur html
Le menu passe derrière le contenu
Contexte d'empilement du header trop bas
z-index sur le header lui-même
Le contenu apparaît à travers
Fond transparent
Donnez une couleur de fond au header
Sticky simple
Rétrécir
Masquer au scroll
Introduction
Fonctionnalités
Tarifs
Contact
Démo de défilement en direct
Passez du mode simple au mode rétréci ou masqué au scroll, puis faites défiler l'intérieur de la boîte.