Wir alle kennen diese Websites mit einem „Sticky Header“. Sie haben oben eine horizontale Navigation, oft mit dem Logo der Website auf der linken Seite – das auch oft viel zu groß ist, womit dann nicht mehr viele Menüpunkte daneben passen. Und dann scrollt man auf diesen Seiten mit dieser großen Kopfzeile nach unten … und die Kopfzeile scrollt nicht nach oben weg. Viele Leute wollen das für ihre eigene Website, aber viele Leute, die diese Seite benutzen, mögen es nicht so sehr. Ich bin einer von ihnen.

Probleme mit fixierten Kopfzeilen

Solche fixierte Kopfzeilen bringen gleich mehrere Probleme mit sich. Es gibt zwar ein paar gute Anwendungsfälle, aber meistens werden sie aus den falschen Gründen verwendet – z. B. wollen Unternehmen immer ihre Logos oder wichtige Navigationspunkte sehen. Meiner Meinung dazu: wenn man die Hauptnavigation benutzen muss, um etwas zu finden, macht man etwas beim Inhalt der Website falsch. Aber was sind eigentlich die Probleme?

Problem 1: Elemente liegen hinter oder vor dem Sticky Header

Wenn ihr eine Website mit einem Sticky Header gestaltet, dann habt ihr wahrscheinlich sichergestellt, dass der Inhalt nach unter gerückt wurde. Da der Sticky Header beim Scrollen aber über dem Inhalt liegen soll, kann er auch Inhalte verdecken, mit denen man dann nicht mehr interagieren kann, z. B. ein Popup, das oben rechts den Button zum Schließen hat und nun hinter dem Header liegt. Und da man bei Popups oft nicht durch die Seite blättern kann, während sie geöffnet sind, kann man die Schaltfläche zum Schließen nicht drücken.

Es kann aber auch Probleme mit Inhalten geben, die vor der Kopfzeile erscheinen, wenn man die Seite nach unten scrollt. Das passiert häufig bei eingebetteten Elementen, z. B. einem Video, einer PDF-Datei oder einer eingebetteten Karte.

Problem 2: Ankerlinks funktionieren nicht mehr

Wenn man einen Anker-Link verwendet, um zu Bereichen der Website zu springen – was auf „One-Pager“ Websites sehr beliebt ist. Ein solches Ankerelement scrollt die Website nach unten (oder oben), um das Element dann am oberen Rand der Seite zu positionieren. Und dann befindet es sich hinter Ihrer Kopfzeile.

Problem 3: Zu wenig vertikaler Platz

Wenn die Kopfzeilen sehr hoch sind, bleibt nicht mehr viel vertikaler Platz auf der Seite, um den Inhalt anzuzeigen.

Nehmen wir einen 11″-Laptop mit 720px Höhe. Das ist nicht so ungewöhnlich, wie ihr vielleicht denken. Dann berechnen wir mal die verfügbare vertikale Höhe:

• Insgesamt: 720px
• Windows-Taskleiste: 66px
• Chrome Tableiste: 40px
• Chrome Adressleiste: 48px
• Chrome Lesezeichenleiste: 34px

Damit bleiben uns nur noch 532px vertikaler Platz. Und nun reduzieren wir diesen um weitere 60px – das ist ungefähr die aktuelle Höhe des Headers in meinem Blog, der nicht wirklich hoch ist. Damit bleiben nur noch 472px verfügbarer Platz. Und haben wir schon über diese Sticky-Cookie-Banner am unteren Rand gesprochen? Das ist dann ungefähr noch so viel Platz, wie ihn viele von uns im Querformat auf unseren Smartphones haben, und wer surft schon gerne im Querformat auf einer Website?

Lösungen

Es gibt mehrere Lösungen für die genannten Probleme. Hier sind einige, die in eurem Fall funktionieren könnten.

Problem 1

Wenn ein einzelnes (typischerweise) eingebettetes Element die Kopfzeile überlagert, müsst ihr einen guten Wert für den z-index für dieses Element finden und ihn überschreiben. Oder ihr erhöht den z-index des Headers. Dies kann jedoch zu einem Problem mit Elementen hinter der Kopfzeile führen. Wahrscheinlich probiert ihr nun viele manuelle z-index Änderungen für mehrere Elemente aus und finden trotzdem einige Elemente, die nicht so erscheinen, wie ihr es wünscht.

Problem 2

Die meisten Websites verwenden CSS-Angaben wie diese, um eine Kopfzeile zu fixieren und den Inhalt nach unten zu verschieben:

.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
html {
    margin-top: 60px;
}

Etwas in dieser Art würde für meine Kopfzeile funktionieren. Es ist auch das, was WordPress macht, wenn es die „Adminbar“ anzeigt. Aber es ist nicht die beste Lösung, um einen Sticky Header zu erstellen.

Es gibt einen relativ neuen Wert sticky für die position CSS-Eigenschaft und so würde der CSS-Code für einen Sticky Header mit diesem neuen Wert aussehen:

.fixed-header {
    position: sticky;
    top: 0;
}

Das Tolle daran: Die Kopfzeile muss nicht das erste/oberste Element auf der Seite sein. Ihr könntet ein Logo haben, gefolgt von der zu fixierenden Kopfzeile und sobald die Kopfzeile beim Herunterscrollen den oberen Rand des Browserfensters erreicht hat, bleibt sie oben „kleben“. In der Vergangenheit war dies nur möglich, indem man die position mit JavaScript auf fixed gewechselt und gleichzeitig margin-top hinzufügt hat. Moderne Browser können diese Art von Effekt jetzt automatisch umsetzen.

Unabhängig davon, wie wir unsere Kopfzeile fixiert, haben wir immer noch das Problem, dass Ankerlinks nicht funktionieren. Das margin von 60px wird verschiebt nicht alle Elemente um diesen Wert nach unten, sondern nur den Anfang des Seiteninhalts.

Um dieses Problem zu lösen, könnt ihr eine zusätzliche CSS-Eigenschaft verwenden, um dem Anker einen Versatz für das Scrollen zu geben, in etwa so:

html {
    scroll-padding-top: 60px;
}

Dieses zusätzliche scroll-padding-top sollte einen Wert erhalten, der mindestens der Höhe der Kopfzeile entspricht. Und hier sehen wir ein weiteres Problem mit dieser Lösung: Wenn sich die Höhe der Kopfzeile ändert, z. B. wenn die Elemente nicht mehr in eine Zeile passen und in zwei Zeilen aufgeteilt werden, dann funktionieren diese statischen Werte nicht mehr. Man könnte jetzt ein wenig JavaScript hinzufügen, um diese beiden Werte dynamisch zu aktualisieren, aber das ist keine gute Lösung.

Problem 3

Meine Lieblingslösung für dieses Problem: Verwenden Sie einfach keinen Sticky Header. Damit sind auch alle anderen Probleme gelöst. Nein, im Ernst. Muss eure Kopfzeile wirklich fixiert sein? Macht es eure Website einfacher zu benutzen? Kann man die Inhalte besser lesen oder sich sogar nur dadurch zurechtfinden? Überlegen es euch zweimal, bevor ihr eine Kopfzeile sticky macht und macht es nicht nur, weil „es euch so gefällt“.

Für den Fall, dass die Kopfzeile fixiert werden soll, gibt es einige Möglichkeiten, um die Nutzbarkeit der Website zu verbessern:

• Verringert die Höhe des Headers, wenn die Website nach unten scrollt – das machen viele Themes
• Versteckt die Kopfzeile nach dem Scrollen nach unten und zeigt sie wieder an, wenn man nach oben scrollt – viele Apps machen das
• Macht den Header „nicht sticky“, wenn ihr eine niedrige Anzeigehöhe ermittelt oder ihr erkennt, dass ein Gerät im Hochformatmodus verwendet wird

Fazit

Manche Leute lieben fixierte Kopfzeilen, andere hassen sie. Ihr müsst für euch selbst entscheiden, ob ihr sie haben wollt. Aber bitte tun eines: testet eure Website nicht nur auf einem großen Desktop-/Laptop-Bildschirm. Nehmen auch mal euer Smartphone zur Hand und schaut euch die Website im Querformat an. Glauben ihr immer noch, dass ein Sticky Header eine gute Idee ist? Dann wendet bitte die oben genannten Techniken an, um die üblichen Probleme zu lösen.