← Tous les articles

Tutoriels

Supprimez les en-têtes collants qui recouvrent le contenu

17 mai 2026 · par JustZix Team

Les en-têtes collants étaient censés garder la navigation à portée de main. Trop souvent, ils vous traquent simplement le long de la page, avalant un tiers de l'écran et masquant le titre sur lequel vous venez de cliquer. Voici comment les apprivoiser avec JustZix.

Les deux problèmes des en-têtes collants

D'abord, ils coûtent de l'espace vertical — sur un portable, une grosse barre collante plus une bande cookies collante peuvent manger la moitié de la zone d'affichage. Ensuite, ils cassent les liens d'ancrage : sautez à une section et le titre atterrit derrière l'en-tête, masqué. Les deux se règlent en pur CSS.

Recette 1 : décoller complètement l'en-tête

Si vous n'avez pas besoin que la barre de navigation vous suive, la correction la plus propre est de la faire défiler comme un contenu normal.

/* Faire défiler les en-têtes normalement */
header, .site-header, .navbar,
[class*="sticky-header"], [class*="header-fixed"],
[style*="position: sticky"], [style*="position:fixed"] {
  position: static !important;
  top: auto !important;
}

C'est la règle la plus efficace de cet article : vous récupérez instantanément l'espace écran et l'en-tête est toujours là en haut quand vous remontez.

Recette 2 : garder l'en-tête mais corriger les sauts d'ancre

Peut-être aimez-vous la barre de navigation collante et détestez seulement qu'elle recouvre les titres après un saut d'ancre. La propriété scroll-margin-top indique au navigateur de laisser de la place.

/* Empêcher l'en-tête collant de masquer les cibles d'ancrage */
:target,
h1[id], h2[id], h3[id], h4[id] {
  scroll-margin-top: 90px !important;
}

Réglez la valeur à environ la hauteur de l'en-tête. Si les titres atterrissent encore trop haut ou trop bas, ajustez le 90px jusqu'à ce que les sections ancrées se placent juste sous la barre.

Recette 3 : rétrécir un en-tête surdimensionné

Certains en-têtes sont collants et énormes. Si vous voulez le garder épinglé tout en récupérant de l'espace, plafonnez sa hauteur et masquez les extras encombrants.

/* Affiner un en-tête collant boursouflé */
.site-header, header.sticky {
  max-height: 48px !important;
  overflow: hidden !important;
}

/* Supprimer les rangées secondaires : barres de recherche, bandes promo */
.header-promo, .header-secondary,
.sub-nav, .announcement-bar {
  display: none !important;
}

Recette 4 : masquer l'en-tête jusqu'à ce que vous remontiez

Pour un résultat plus soigné, masquez l'en-tête pendant la lecture et révélez-le seulement quand vous remontez. Cela nécessite une petite règle JS.

// Afficher l'en-tête uniquement en remontant
let lastY = window.scrollY;
const bar = document.querySelector('header, .site-header, .navbar');

if (bar) {
  bar.style.transition = 'transform .2s ease';
  window.addEventListener('scroll', () => {
    const y = window.scrollY;
    bar.style.transform =
      (y > lastY && y > 200) ? 'translateY(-100%)' : 'translateY(0)';
    lastY = y;
  }, { passive: true });
}

Maintenant l'en-tête se range pendant que vous descendez et réapparaît dès que vous remontez — le comportement que la plupart des sites auraient dû livrer dès le départ.

N'oubliez pas le pied de page

Les pieds de page collants et les bulles de chat causent le même problème de grignotage de contenu au bas de l'écran. La même approche les élimine :

/* Supprimer les pieds de page collants et les widgets de chat */
.sticky-footer, [class*="cookie-bar"],
[class*="chat-widget"], [id*="intercom"],
[class*="floating-cta"] {
  display: none !important;
}

Choisissez la bonne recette

• Vous voulez un maximum d'espace ? Utilisez la Recette 1.
• Vous aimez la barre de navigation, vous détestez les sauts ? Utilisez la Recette 2.
• Vous voulez un compromis ? Combinez les Recettes 3 et 4.

Appliquez-les par site, car le balisage des en-têtes diffère partout. JustZix garde la règle de chaque site séparée pour que vous puissiez en ajuster une sans toucher au reste.

Commencez à récupérer votre écran

Installez depuis la page télécharger JustZix et parcourez les exemples prêts à l'emploi pour plus de corrections de mise en page. Les en-têtes collants partagent souvent l'espace avec des bannières publicitaires — éliminez-les aussi avec notre guide sur /fr/blog/block-display-ads-with-css-rules.