← Alle Beiträge

Anleitungen

Fixierte Kopfzeilen entfernen, die Inhalte verdecken

17 Mai 2026 · von JustZix Team

Fixierte Kopfzeilen sollten die Navigation griffbereit halten. Zu oft verfolgen sie Sie nur die Seite hinunter, schlucken ein Drittel des Bildschirms und verdecken die Überschrift, die Sie gerade angeklickt haben. So zähmen Sie sie mit JustZix.

Die zwei Probleme mit fixierten Kopfzeilen

Erstens kosten sie vertikalen Platz — auf einem Laptop kann eine dicke fixierte Leiste plus ein fixierter Cookie-Streifen die Hälfte des Anzeigebereichs auffressen. Zweitens machen sie Anker-Links kaputt: Springen Sie zu einem Abschnitt, und die Überschrift landet hinter der Kopfzeile, verborgen. Beides sind reine CSS-Korrekturen.

Rezept 1: Die Kopfzeile vollständig lösen

Wenn Sie nicht brauchen, dass die Navigationsleiste Ihnen folgt, ist die sauberste Korrektur, sie wie normalen Inhalt wegscrollen zu lassen.

/* Kopfzeilen normal wegscrollen lassen */
header, .site-header, .navbar,
[class*="sticky-header"], [class*="header-fixed"],
[style*="position: sticky"], [style*="position:fixed"] {
  position: static !important;
  top: auto !important;
}

Das ist die wirkungsvollste Regel in diesem Beitrag: Sie bekommen sofort den Bildschirmplatz zurück, und die Kopfzeile ist immer noch oben, wenn Sie nach oben scrollen.

Rezept 2: Die Kopfzeile behalten, aber Ankersprünge reparieren

Vielleicht mögen Sie die fixierte Navigationsleiste und hassen nur, dass sie nach einem Ankersprung Überschriften verdeckt. Die Eigenschaft scroll-margin-top sagt dem Browser, Platz zu lassen.

/* Verhindern, dass die fixierte Kopfzeile Ankerziele verdeckt */
:target,
h1[id], h2[id], h3[id], h4[id] {
  scroll-margin-top: 90px !important;
}

Setzen Sie den Wert ungefähr auf die Höhe der Kopfzeile. Wenn Überschriften immer noch zu hoch oder zu tief landen, passen Sie die 90px an, bis verankerte Abschnitte direkt unter der Leiste sitzen.

Rezept 3: Eine übergroße Kopfzeile verkleinern

Manche Kopfzeilen sind fixiert und riesig. Wenn Sie sie angeheftet behalten, aber Platz zurückgewinnen wollen, begrenzen Sie ihre Höhe und blenden Sie die sperrigen Extras aus.

/* Eine aufgeblähte fixierte Kopfzeile abspecken */
.site-header, header.sticky {
  max-height: 48px !important;
  overflow: hidden !important;
}

/* Sekundäre Zeilen weglassen: Suchleisten, Werbestreifen */
.header-promo, .header-secondary,
.sub-nav, .announcement-bar {
  display: none !important;
}

Rezept 4: Die Kopfzeile ausblenden, bis Sie nach oben scrollen

Für ein eleganteres Ergebnis blenden Sie die Kopfzeile beim Lesen aus und zeigen sie nur, wenn Sie nach oben scrollen. Das braucht eine kleine JS-Regel.

// Die Kopfzeile nur beim Hochscrollen anzeigen
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 });
}

Jetzt verschwindet die Kopfzeile, während Sie nach unten lesen, und gleitet in dem Moment zurück, in dem Sie nach oben scrollen — das Verhalten, das die meisten Seiten von Anfang an hätten ausliefern sollen.

Vergessen Sie nicht die Fußzeile

Fixierte Fußzeilen und Chat-Blasen verursachen dasselbe inhaltsfressende Problem am unteren Bildschirmrand. Derselbe Ansatz beseitigt sie:

/* Fixierte Fußzeilen und Chat-Widgets entfernen */
.sticky-footer, [class*="cookie-bar"],
[class*="chat-widget"], [id*="intercom"],
[class*="floating-cta"] {
  display: none !important;
}

Das richtige Rezept wählen

• Wollen Sie maximalen Platz? Verwenden Sie Rezept 1.
• Mögen Sie die Navigationsleiste, hassen aber die Sprünge? Verwenden Sie Rezept 2.
• Wollen Sie einen Kompromiss? Kombinieren Sie Rezept 3 und 4.

Wenden Sie sie pro Seite an, da die Kopfzeilen-Markup überall unterschiedlich ist. JustZix hält die Regel jeder Seite getrennt, sodass Sie eine anpassen können, ohne die anderen zu berühren.

Holen Sie sich Ihren Bildschirm zurück

Installieren Sie von der Seite JustZix herunterladen und durchstöbern Sie die fertigen Beispiele für weitere Layout-Korrekturen. Fixierte Kopfzeilen teilen sich oft den Platz mit Werbebannern — beseitigen Sie auch diese mit unserer Anleitung unter /de/blog/block-display-ads-with-css-rules.