← Alle Beiträge

Anleitungen

Zähme die Sticky-Elemente, die deinen Inhalt verdecken

15 Mai 2026 · von JustZix Team

Ein Sticky-Header, der 90 px hoch bleibt, während du scrollst. Eine schwebende „Abonniere den Newsletter"-Leiste. Ein „Nach oben"-Button, der den letzten Satz eines Absatzes verdeckt. An den Bildschirm geklebte Elemente können ein Drittel der Ansicht fressen. So zähmst du sie.

Was sie klebt

Zwei CSS-Eigenschaften: position: sticky (das Element klebt, sobald du an seinen Platz scrollst) und position: fixed (das Element sitzt von Anfang an fest). Beide lassen sich überschreiben.

Zwei Ansätze

Lösen — das Element bleibt, scrollt aber mit der Seite. Gut für Header, die nützlich sind, nur nicht ewig oben sein müssen.

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

Verstecken — das Element verschwindet ganz. Gut für schwebende CTAs, „Nach oben"-Widgets, Promo-Leisten.

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

Wie man den Übeltäter findet

Nicht sicher, welches Element geklebt ist? Öffne die JustZix JS Console und tippe:

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

Die Konsole listet jedes fixed- und sticky-Element auf — hover über jedes, um es auf der Seite zu sehen, und kopiere dann seine Klasse in den Regel-Selektor.

Fallstricke

• Einen Header zu lösen kann dich kosmetisch kosten. Manche Layouts verlassen sich darauf, dass der Header fixed ist; nach position: static kann der Inhalt darunter nach oben springen. Meist akzeptabel, aber prüf es.
• Nicht jedes Sticky ist schlecht. Ein Sticky-Inhaltsverzeichnis oder eine Lesefortschrittsleiste können nützlich sein — ziele präzise, nicht pauschal.
• Teil-Klassen-Selektoren. [class*="fixed"] trifft auch .fixed-width, das mit Positionierung nichts zu tun hat. position: static darauf macht nichts kaputt, aber gut zu wissen.

Siehe auch

• Beispiele — das Chat-Widget-Versteck-Snippet und andere
• Cookie-Banner verstecken — verwandtes Entrümpeln aufdringlicher Elemente
• Bau deinen eigenen Lesemodus — eine Seite ganz entrümpeln

Installiere JustZix — und hol dir den Bildschirm zurück, den festgeklebte Leisten belegen.