← Tous les articles

Tutoriels

Maîtrisez les éléments sticky qui couvrent votre contenu

15 mai 2026 · par JustZix Team

Un en-tête sticky qui reste haut de 90 px pendant que vous scrollez. Une barre flottante « abonnez-vous à la newsletter ». Un bouton « retour en haut » couvrant la dernière phrase d'un paragraphe. Les éléments collés à l'écran peuvent manger un tiers de la vue. Voici comment les maîtriser.

Ce qui les colle

Deux propriétés CSS : position: sticky (l'élément se colle dès que vous scrollez jusqu'à sa place) et position: fixed (l'élément reste en place dès le début). Les deux peuvent être surchargées.

Deux approches

Décoller — l'élément reste, mais défile avec la page. Bon pour les en-têtes utiles, qui n'ont juste pas besoin d'être en haut pour toujours.

header, .site-header, .navbar,
[class*="sticky"], [class*="fixed"] {
  position: static !important;
}

Masquer — l'élément disparaît entièrement. Bon pour les CTA flottants, les widgets « retour en haut », les barres promo.

[class*="back-to-top"], [class*="scroll-top"],
[class*="sticky-cta"], [class*="floating-bar"] {
  display: none !important;
}

Comment trouver le coupable

Pas sûr de quel élément est collé ? Ouvrez la JS Console de JustZix et tapez :

[...document.querySelectorAll('*')]
  .filter(el => {
    const p = getComputedStyle(el).position;
    return p === 'fixed' || p === 'sticky';
  })
  .forEach(el => console.log(el));

La console liste chaque élément fixed et sticky — survolez chacun pour le voir sur la page, puis copiez sa classe dans le sélecteur de la règle.

Pièges

• Décoller un en-tête peut vous coûter cosmétiquement. Certaines mises en page comptent sur l'en-tête fixe ; après position: static, le contenu en dessous peut sauter vers le haut. Généralement acceptable, mais vérifiez.
• Tout sticky n'est pas mauvais. Une table des matières sticky ou une barre de progression de lecture peuvent être utiles — visez précisément, pas en gros.
• Sélecteurs par fragment de classe. [class*="fixed"] touche aussi .fixed-width, qui n'a rien à voir avec le positionnement. position: static dessus ne casse rien, mais c'est bon à savoir.

À voir aussi

• Exemples — le snippet de masquage des widgets de chat et d'autres
• Masquer les bannières cookies — désencombrement apparenté des éléments intrusifs
• Construisez votre propre mode lecture — désencombrer une page jusqu'au bout

Installez JustZix — et récupérez l'écran pris par les barres collées.