Loading...

Sticky Header

Scroll to fixed Navigation

Scroll to fixed Navigation

verbessert die Usability

... oder auch Sticky Navigation genannt. Sticky bedeutet wörtlich übersetzt „klebend“. Unter einer solchen Navigation versteht man, dass die Menüleiste einer Website relativ zum restlichem Inhalt im Browserfenster an einer fixen Position bleibt – egal wo man sie haben möchte, ob nun oben oder seitlich. Im Gegensatz zum restlichen Inhalt, der nach oben oder unten gescrollt werden kann. Damit können User, egal wie weit gescrollt wurde, jederzeit auf andere Seiten der Webseite wechseln. Ein einfacher Trick der die Bedienbarkeit verbessert und ebenso die Verweildauer auf einer Webseite erhöht. Neu ist, dass sich oft die Navigation bzw der Header (Kopfteil mit Menü), sobald gescrollt wird, in ihrer Darstellung verkleinert bzw. vereinfacht. So wir hier auf dieser Seite in der Navigation oben, welches als Beispiel dient.

Leicht umzusetzende Codes zum selber umsetzen findest du hier:


Während der Nutzung einer Webseite ist die dauerhaft sichtbare Navigation ein offensichtlicher Vorteil. Bei Facebook, Twitter und Co ist der Vorteil besonders groß. Trotz der endlos scrollenden Timeline kann jederzeit auf den Chat, Nachrichten und andere Funktionen zurückgegriffen werden. Das spart nen Nutzer viel Zeit. Elemente, wie eine Seitenleiste, können ebenfalls “Sticky” gemacht werden. Ebenso könnte auch das Menü statt oben dauerhaft an der Seite angebracht werden. So werden dem Nutzer bestimmte Inhalte permanent vor Augen geführt. Ob Social Media Buttons oder die Seitenleiste während dem Scrollen angezeigt werden sollen, kann ganz nach Bedarf entschieden werden. Aber Vorsicht: Falls die mitscrollenden Elemente zu aufdringlich sind, lenken sie vom eigentlichen Inhalt ab.

Falls ein Sticky Header eingesetzt wird, dann sollte er so klein wie möglich gehalten werden. Hier gilt abzuwägen, wie schmal die Menü-Zeile werden kann um alle wichtigen Funktionen zu beinhalten und diese angenehm darzustellen. Es existiert keine allgemeingültige Regel für die Navigation. Wenn bestimme Funktionen oder eine Menüzeile immer Relevanz haben und sichtbar sein sollten, dann ist Sticky Navigation die richtige Wahl. Soll der Inhalt im Vordergrund stehen, ist es besser auf eine fixe Navitation zu verzichten.

sticky header
css