Was ist ein Sticky Header?
Inhaltsverzeichnis
    Add a header to begin generating the table of contents

    Grundlagen

    Um die Begriffe und Vorgänge genau verstehen zu können, benötigst du Grundkenntnisse in:

    •  HTML5 
    •  CSS3

    Du hörst immer wieder den Begriff Sticky Header, doch du kannst damit nichts anfangen? Das ist ab jetzt kein Problem mehr. In diesem Artikel wirst du erfahren was ein Sticky Header ist, welche Vorteile/Nachteile er hat und ob er für deine Website interessant wäre.

    Begriffserklärung:

    Teilen wir den Begriff in seine Bestandteile auf.

    • Sticky
    • Header

    Mit Sticky ist das fixieren oder anpinnen gemeint. Hierbei handelt es sich um eine Funktion die CSS3 mit sich bringt.

    Beim Header handelt es sich um den Kopfteil. Das ist ein Begriff aus dem HTML5 Bereich. Im Header befindet sich z.B. die Navigationleiste deiner Website.

    Was ist ein Sticky Header?

    Der Sticky Header ist, wie wir es in der Begriffserklärung schon erfahren haben eine fixierte Navigationsleiste. Der Sticky Header sorgt dafür, dass deine Navigationsleiste zu jedem Zeitpunkt auf deiner Website sichtbar ist. Besitzt du eine WordPress Seite kann es gut möglich sein, dass dein Theme die Einstellung für einen Sticky Header schon mitbringt. Du kannst auch andere Elemente deiner Website „anpinnen“. Ein prominentes Beispiel hierfür ist die Seite von Facebook (siehe Bild). 

    Mit Sticky Header

    Ohne Sticky Header

    Welchen Vorteil hat ein Sticky Header?

    • Schnellere Navigation auf deiner Website, da die Navigationleiste immer sichtbar bleibt

    Der Benutzer behält immer die Übersicht über die Navigation und kann so schnell durch deine Website navigieren.

    Welchen Nachteil hat ein Sticky Header?

    • Durch die dauerhafte Anzeige des Header geht dir Platz zur Darstellung deiner Website verloren 

    Kann ich einen Sticky Header auf meiner Website nachrüsten?

    Grundsätzlich ist das kein Problem. Du benötigst eigentlich nur Kenntnisse in HTML5 und CSS3 um dir deinen eigenen Sticky Header zu erstellen. Benutzt du WordPress für deine Homepage kann es sogar sein, dass du die Möglichkeit eines Sticky Headers schon in deinem Theme aktivieren kannst. Falls dir dein Theme keine Möglichkeiten zur Aktivierung des Sticky Header zu Verfügung stellt kannst du hier in meinem Blog einfach nachlesen, wie du dir dein Sticky Header selbst und ohne Plugin programmieren kannst.