Als aufmerksamen Leser unseres Magazins ist Ihnen bestimmt die Navigationsleiste aufgefallen, die beim Scrollen eines Artikels am oberen Rand des Browser-Fensters einrastet, also sozusagen „kleben“ bleibt.
Und genau diese Funktion einer „sticky navigation bar“, wie es im Englischen heißt, möchten wir heute nachbauen. Dazu benötigen wir neben CSS auch eine kleine Portion JavaScript für die Steuerung.
Neben aller grauen Theorie (in die unsere Erklärungen hoffentlich ein bisschen Licht bringen) gibt es zu diesem Beitrag natürlich ein anschauliches Beispiel zum Herunterladen.
Download: Beispiel zu diesem Tutorial (HTML)
Die Datei können Sie gerne als Grundlage für eigene Implementierungen nutzen.
Die Navigationsleiste dieses Tutorials
Nach dem Durcharbeiten dieses Tutorials werden Sie in der Lage sein, die folgende „klebende“ Navigationsleiste zu programmieren (Weiterlesen lohnt sich also…):
Grundsätzliche Funktionsweise
Die Navigationsleiste wird in Form einer „div“-Box realisiert, welche sich an jeder beliebigen Stelle innerhalb der Seite befinden kann (üblicherweise irgendwo im ersten Drittel).
Beim Herunterscrollen der Seite bleibt die Navigationsleiste am oberen Rand des Browserfensters haften und weiterhin sichtbar, während die übrigen Inhalte unter ihr hindurch laufen.
Fallback bei deaktiviertem CSS/JavaScript
Gerade essentielle Komponenten wie eine Navigationsleiste sollten auch dann funktionieren, wenn der Nutzer CSS und/oder JavaScript in den Einstellungen seines Webbrowsers abschaltet.
Bei deaktiviertem JavaScript verhält sich unsere Navigationsleiste wie alle anderen Elemente auf der Seite, scrollt also mit dem restlichen Bildschirminhalt nach unten oder oben mit.
Und im Worst-Case-Szenario (deaktiviertes JavaScript und deaktiviertes CSS), würden die Menüeinträge der Leiste als normale Textlinks zum Anklicken angezeigt. Da moderne Websites ohne CSS jedoch kaum mehr nutzbar sind, sollte diese Konstellation wirklich nur in sehr seltenen Fällen eine Rolle spielen.
Implementierung Schritt-für-Schritt
Im folgenden zeigen wir Ihnen anhand einer simplen Webseite, wie die Implementierung einer klebenden Navigationsleiste im Detail funktioniert.
Schritt 1: Die Navigationsleiste
Da wir bei diesem Tutorial auf modische Extravaganzen zugunsten der leichteren Verständlichkeit verzichten möchten, nutzen wir eine klassische Menüzeile, wie sie für viele Websites passend ist:
<div id="ofa_navbar">
<a href="index.html">Homepage</a>
<a href="neues.html">Neuigkeiten</a>
<a href="leistungen.html">Unsere Leistungen</a>
<a href="shop.html">Shop</a>
<a href="kontakt.html">Kontakt</a>
</div>Dieser HTML-Code an einer beliebigen Stelle innerhalb der <body>…</body>-Tags untergebracht, erzeugt eine „div“-Box mit den Einträgen für die Navigationsleiste in Form einzelner Textlinks.
Schritt 2: Das CSS
<style>
#ofa_navbar
{ overflow: hidden; background-color: #6D5B4F; }
#ofa_navbar a
{
padding: 14px;
float: left; display: block;
color: #f2f2f2; text-align: center; text-decoration: none;
}
.ofa_stickyNavbar
{ position: fixed; top: 0px; width: 100%; }
.scrollingContent { }
.ofa_stickyNavbar + .scrollingContent
{ padding-top: 50px; }
</style>
Kopieren Sie das CSS – wie üblich – zwischen die <head>…</head>-Tags der Seite.
Die ersten beiden Blöcke verleihen der „div“-Box das typische Aussehen einer Navigationsleiste. Hier können Sie Ihrer eigenen Kreativität freien Lauf lassen und das Design beliebig anpassen.
Die CSS-Klasse „ofa_stickyNavbar“ fixiert die „div“-Box am oberen Rand des Browserfensters (mit einem Abstand von 0 Pixeln). Sie wird der Navigationsleiste später via JavaScript zugewiesen.
„scrollingContent“ definieren wir anfänglich als leer. Sie kommt erst später zum Einsatz, nämlich dann, wenn der Content unterhalb der Navigationsleiste selbige beim Scrollen nach oben berührt. Warum das Sinn macht, verraten wir im nachfolgenden Abschnitt.
Wichtig ist zunächst, allen Content unterhalb der Navigationsleiste in eine „div“-Box zu packen und dieser in ihrem „style“-Attribut die Klasse „scrollingContent“ zuzuweisen; siehe auch unser Beispielprojekt.
Von Selektoren und Kombinatoren
Jetzt wird’s interessant, denn wir arbeiten nun mit einer relativ selten gebrauchten CSS-Funktion: Einem Kombinator – hier in Form des „+“-Zeichens.
Der „+“-Kombinator dient dazu, eine Abhängigkeit zwischen zwei Selektoren („CSS-Klassen“) zu schaffen. Und zwar dahingehend, dass die angegebenen CSS-Anweisungen dem letztgenannten Selektor zugefügt werden, allerdings nur dann, wenn dieser im Elementbaum der Webseite direkt auf den ersten Selektor folgt.
Wie schon angedeutet benutzen wir dies, um dem Seiteninhalt („scrollingContent“) einen Innenabstand hinzuzufügen, sobald dieser die Navigationsleiste („ofa_stickyNavbar“) berührt. Das verhindert ein plötzliches Ruckeln beim Aneinanderstoßen beider Elemente.
Schritt 3: Das JavaScript
<script>
window.onscroll = function() { do_stickyNavbar() };
var navbar = document.getElementById("ofa_navbar");
var sticky = navbar.offsetTop;
function do_stickyNavbar() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("ofa_stickyNavbar")
} else {
navbar.classList.remove("ofa_stickyNavbar");
}}
</script>
Das JavaScript sollte seinen Platz am Ende des HTML-Dokuments finden, also vor dem </body>-Tag.
Das ist notwendig, da wir auf den DOM-Baum zugreifen wollen (sprich, auf Elemente der Seite, genauer gesagt auf die Navigationsleiste). Der DOM-Baum steht aber erst dann vollständig zur Verfügung, wenn der gesamte Seiteninhalt vom Webbrowser verarbeitet wurde.
In einem ersten Schritt legen wir zwei Variablen an:
- „navbar“ ist das Äquivalent unserer Navigationsleiste (das Element mit der ID „ofa_navbar“).
- „sticky“ gibt den Abstand der Navigationsleiste zum darüber liegenden Element an (in Pixel).
Die Magie der Navigationsleiste spielt sich in der Funktion „do_stickyNavbar“ ab. Sie wird während des Scrollens wiederholt aufgerufen („window.onscroll“ ist der Event-Handler für „ich scrolle gerade“):
Hier vergleichen wir die durch das Scrollen zurückgelegte Wegstrecke mit dem kurz nach dem Seitenaufbau gemessenen Abstand zwischen Fensteroberkante und Navigationsleiste.
Ist die Differenz null oder wurde sogar darüber hinaus gescrollt, wird der Navigationsleiste die CSS-Klasse „ofa_stickyNavbar“ zugewiesen. Scrollt der Benutzer nach unten, entfernen wir die Zuweisung und die Navigationsleiste löst sich wieder von der Fensterkante.
Und schon ist die haftende Navigationsleiste fertig! 🙂
Tipps zur Fehlersuche
Wie so oft gilt bei der Änderung an einer bereits bestehenden Website das alte Sprichwort „Kein Backup, kein Mitleid!“. Legen Sie deshalb immer eine Sicherungskopie aller Dateien an, bevor Sie beginnen.
Sollte die Navigationsleiste nicht korrekt funktionieren, helfen die in manchen Webbrowsern verfügbaren Entwickler-Tools weiter, besonders um Tippfehlern auf die Spur zu kommen.
Die meisten Probleme entstehen im Zusammenhang mit nicht beachteter Groß-/Kleinschreibung (gerade JavaScript reagiert hier sehr empfindlich). Stellen Sie zudem sicher, dass die Bezeichnungen der CSS-Klassen mit jenen im HTML- und JavaScript-Code übereinstimmen.
Autor: Tobias Eichner | Datum der Veröffentlichung: Januar 2019
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
