Angeklebte Kopfzeile

Zur Erreichung einer intuitiven Bedienbarkeit der Webseiten kann es hilfreich sein, bestimmte Elemente im angezeigten Bereich zu fixieren. Dabei geht allerdings ein Teil des verfügbaren Anzeigebereiches für den Inhalt verloren.

Je nach Größe des Kofbereiches und der darin enthaltenen Elemente, wie z.B. Logo, Seitenname, Menü, Service- oder Hilfebuttons, kann beim Herunterscrollen der Seite der Kopfbereich so verkleinert werden, dass zumindest die wichtigsten Bedienelemente vorhanden sind.

Diese Technik bezeichnet man auch als „sticky header“. Sticky header bedeutet auf deutsch: angeklebte Kopfzeile.

Für die Umsetzung allein mit CSS-Styles unter Verwendung von position: sticky [1] ist eswohl noch zu früh. Über die Webseite Kann ich das verwenden? (caniuse.com) kann man prüfen, inwieweit neue Techniken bereits umgesetzt sind und bei wieviel Prozent der potentielle Besucher und Kunden diese Technik bereits unterstützt wird.

Aktuell beträgt der Wert nur 18.67 %!

Zuwenig, um darauf eine Lösung für eine produktive Seite aufzubauen.

Die Umsetzung erfolgt somit mit Css3 und JavaScript.

Im Sinne einer schnellen Seitenladezeit ist es nicht immer sinnvoll ganze Frameworks zu laden, um z.B. eine Css-Klasse oder eine Css-Style anzupassen. Es funktioniert auch mit purem JavaScript!

Allerdings ist der Programmieraufwand bei den verschiedenen Frameworks durchaus geringer und wenn diese ohnehin geladen werden, weil sie an anderer Stelle gebraucht werden, spricht nichts dagegen diese auch zu verwenden.

(function($)
{
$(window).scroll(function () {
if ($(this).scrollTop() > 1) {
$('#overcard').addClass('sticky');
} else {
$('#overcard').removeClass('sticky');
}
});

})(jQuery);

 

Quellen:

  1. maddesignsde – Css3 Position Sticky Artikel vom 16.05.2014
  2. callmenick.com – js css-Klassen