Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Fixierte Navigationsleisten, die sich horizontal über die volle Breite der Website erstrecken sind keine Seltenheit. Um den Blick des Anwenders auf den Inhalt zu lenken und gleichzeitig den wertvollen Platz auf dem Display bestmöglich ausnutzen zu können, wird die Navigation auch häufig beim runterscrollen versteckt und beim hochscrollen wieder angezeigt. Insbesondere sog. Onepager und Landingpages nutzen vermehrt den Effekt. In diesem Beitrag archivieren wir eine CSS/jQuery-Lösung um das Verhalten herzustellen.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

HTML-Grundaufbau

Die HTML-Struktur besteht in unserem Beispiel lediglich aus einem leeren <nav>-Element.

<nav></nav>

Scroll-Richtung mit jQuery abfragen

Zunächst prüfen wir mit Hilfe von jQuery in welche Richtung der Anwender scrolled. Wenn er nach unten scrolled, wird dem <body> die Klasse down hinzugefügt. Wenn es nach oben geht wird die Klasse entfernt.

var lastScrollTop = 0;
$(window).scroll(function(event){
  var st = $(this).scrollTop();
  if (st > lastScrollTop){
    if (!$('body').hasClass('down')) {
      $('body').addClass('down');
    }
   } else {
     $('body').removeClass('down');
   }

   lastScrollTop = st;

   if ($(this).scrollTop() <= 0) {
     $('body').removeClass('down');
   };
});

Verstecken der Navigation mit CSS

Der CSS-Code ist ebenfalls recht übersichtlich. Die Navigation wird eingefärbt, oben im Browserfenster fixiert und über die volle Breite ausgedehnt. Zusätzlich erhält sie eine feste Höhe und eine Transition, damit sie später animiert aus dem Viewport fährt, sobald per JavaScript die Klasse hinzugefügt wird.

Sobald die Klasse down vorhanden ist, wird mit der CSS-Eigenschaft transform die Navigation um Ihre Höhe nach oben aus dem Viewport geschoben.

nav {
   height:100px;
   background:lime;
   position: fixed;
   top:0;
   right:0;
   left:0;
   transition: transform .25s .1s ease-in-out;
}

.down nav {
   transform: translate3d(0, -100px, 0); // um 100px nach oben verschieben
}

Beispiel anschauen

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 30 Kommentare

  1. Leonard Kengji
    schrieb am 18.03.2021 um 21:57 Uhr:

    Kann mir da jemand bitte helfen für Elementor die richtigen Markups und Klassen schreiben, und wo ich was einbinden soll?

    Antworten
  2. Leonard Kengji
    schrieb am 22.01.2021 um 08:53 Uhr:

    Hallo

    Ich finde diese Möglichkeit grossartig

    Kann ich diese irgendwie in Elementor einbinden?

    Antworten
    • Jonas Hellwig
      schrieb am 22.01.2021 um 09:04 Uhr:

      Grundsätzlich ja – vorausgesetzt, du kannst eigenes JavaScript im WordPress-Theme einschleusen (z.B. über ein Child-Theme o.ä.). Das Markup und die Klassen etc. weichen dann natürlich vom Beispiel ab und müssen angepasst werden.

      Antworten
      • Leonard Kengji
        schrieb am 26.01.2021 um 10:15 Uhr:

        besten dank

        gibt es eine js-plugin evtl?

        was würdest du verlangen mir dies kur zu machen, wenns geht aber ohne child-theme.

      • Leonard Kengji
        schrieb am 26.01.2021 um 10:27 Uhr:

        so ein plugin habe ich schon gefunden und installiert, aber jetz sollte ich die klassen richtig einschleusen.

        kannst du mir bitte helfen?

  3. Henning Famulla
    schrieb am 04.06.2019 um 11:18 Uhr:

    Hey,

    ich habe die ersten 3 Google Seiten nach einer Sticky Navbar Lösung durchsucht, aber nichts gefunden was funktioniert.
    Ich arbeite mit einem Baukasten (Siquando ProWeb3) und habe nur einige HTML,PHP Codes eingefügt, da ich nicht so der Programmierer bin.
    Kann mir evt. jemand einen Tipp geben, wie ich das auf der Homepage http://www.ahaf.de umsetzen kann?
    Danke für jede Hilfe!

    Beste Grüße

    Henning Famulla

    Antworten
    • Jonas Hellwig
      schrieb am 07.06.2019 um 09:41 Uhr:

      Hallo Henning, das Snippet hier im Blog ist standardkonform und sollte funktionieren. Möglicherweise beinhaltet deine Umsetzung auf Grundlage einer Vorlage aber Code, der Inkompatibilitäten verursacht. Das lässt sich allerdings nur mit entsprechender Recherche in Erfahrung bringen.

      Antworten
  4. marie
    schrieb am 07.05.2019 um 14:17 Uhr:

    Hallo,

    ich wollet mich erstmal bedanken für die tollen Tipps!
    Ich habe folgende Frage, im header Bereich habe ich ein Logo (relativ groß), das über den Slider hervorsteht (im Vordergrund), wenn ich die Seite nach unten scrolle, geht das Element/Logo mit, allerdings soll in Hintergrund bzw. rücken. Im Content ist schon der Test und das Logo soll hinter dem Text sein. Wäre es möglich? Ich habe schon dem Logo z-index:1 vergeben aber, wenn ich den anderen Elementen auch 1 oder 2 vergebe ändert sich nichts.

    Antworten
  5. Stephan
    schrieb am 30.11.2018 um 00:11 Uhr:

    Hallo, gibt es die Möglichkeit zu sagen das die leiste erst wieder erscheinen soll wenn man ganz nach oben gescrollt hat? Danke

    Antworten
    • Jonas Hellwig
      schrieb am 30.11.2018 um 09:48 Uhr:

      Wenn die Navigation beim runterscrollen verschwinden soll und dann beim hochscrollen erst ganz oben sichtbar sein soll, musst du doch gar nichts machen. Das ist ja der Standard … oder?

      Antworten
  6. Patrick
    schrieb am 25.05.2018 um 00:33 Uhr:

    Hallo,
    gibt es da keine Lösung um komplett auf Javascript zu verzichten? Denn wenn Javascript deaktiviert ist, würde dein Code nicht funktioniert. Bitte um Antwort. Vielen Dank

    Antworten
    • Jonas Hellwig
      schrieb am 27.05.2018 um 08:43 Uhr:

      Nein, eine Lösung ohne JavaScript gibt es nicht. Was allerdings auch nicht tragisch ist, wenn die Website sauber nach dem Progressive Enhancement-Konzept aufgebaut ist.

      Antworten
  7. Marco Rieser
    schrieb am 12.01.2018 um 19:08 Uhr:

    Super, ich würde das Ganze aber mit debouncing schreiben, dann ist das nicht so ressourcenhungrig.

    Antworten
  8. Jan Wadehn
    schrieb am 22.09.2017 um 11:47 Uhr:

    Tolles Skript! Absolut!

    Gibt es eine Möglichkeit, dass erst wieder ab zB Scrollwert 250 angezeigt wird, also nicht bei jedem upscroll?

    Danke für einen Tipp!

    Antworten
  9. Thomas
    schrieb am 12.09.2017 um 15:12 Uhr:

    Hallo,
    gutes Tutorial.
    Was muß wo hinzugefügt / abgeändert werden, wenn das Verstecken der Navigation erst einsetzen soll, wenn schon etwas gescrollt wurde, z.B. nach 200px scrollen die Navigation ausgeblendet werden soll?

    Antworten
    • Sebastian
      schrieb am 06.01.2018 um 20:23 Uhr:

      Ändere die Variable lastScrollTop = 0 z.B. zu lastScrollTop = 200px;
      Damit sollte es funktionieren

      Antworten
  10. Navigation beim Runterscrollen verstecken, beim Hochscrollen anzeigen | kulturbanause® blog – Michael-Grau.de
    schrieb am 26.08.2017 um 17:16 Uhr:

    […] Quelle: Navigation beim Runterscrollen verstecken, beim Hochscrollen anzeigen | kulturbanause® blog […]

    Antworten
  11. Christian Schatz
    schrieb am 13.06.2017 um 10:44 Uhr:

    Hallo,
    vielen Dank für das kleine Tutorial.
    Mir ist bloß etwas aufgefallen: Im IE (nicht Edge) funktioniert das Script leider nicht wie gewünscht. Der IE (alle Versionen) berechnet den Wert für scrollTop() zu langsam. Das führt dazu, dass beim scrollen der letzte Wert mehrfach berechnet wird. Somit geht er bei if(st > lastScrollTop) immer in das else und beim runterscrollen wird die Navigation niemals „sticky“!

    Ein Workaround für mich war, dass ich über BrowserDetect den InternetExplorer abgefragt habe und diese Alternative eingebaut habe:

    if(BrowserDetect.browser === ‚IExplorer‘) {
    $(this).bind(‚mousewheel‘, function(e){
    if(e.originalEvent.wheelDelta < 0) {
    //scroll down
    if (!$('.header').hasClass('sticky')) {
    $('.header').addClass('sticky');
    } else {
    //scroll up
    $('header').removeClass('sticky');
    }
    });
    }

    Antworten
    • Julian
      schrieb am 05.08.2019 um 21:38 Uhr:

      Hallo

      Kann mir jemand sagen wo man diesen Code einfügen muss damit es auch im Internet Explorer funktioniert?
      Ich habe schon viele verschiedene Codes ausprobiert und keiner funktioniert im IE11. Mit diesem Post hatte ich wieder Hoffnung eine Lösung gefunden zu haben, aber wenn ich den im script einfüge geht nichts mehr.

      Antworten
  12. Timo Klemm
    schrieb am 25.05.2017 um 11:06 Uhr:

    Ah, ok, das macht Sinn. Trotzdem ist die zweite Abfrage überflüssig, da der scrollTop-Wert ja bereits in der Variable gespeichert ist. Auch die hasClass-Abfrage kann man weglassen, da jQuery das intern eh überprüft.
    Ich hab das nochmal entsprechend umgestellt, jetzt klappt’s auch in Safari:
    https://jsfiddle.net/cre06a09/2/

    Antworten
  13. Timo Klemm
    schrieb am 23.05.2017 um 10:11 Uhr:

    Hallo,
    ist die zweite scrollTop-Abfrage (<=0) nicht überflüssig? Der scrollTop-Wert von window wird eh nie negativ sein und wenn er 0 ist, ist er auf jeden Fall kleiner als lastScrollTop und das wird schon vom vorherigen conditional behandelt.
    Demo:
    https://jsfiddle.net/cre06a09/1/

    Oder überseh ich da irgendetwas?

    Antworten
    • Jonas Hellwig
      schrieb am 25.05.2017 um 10:03 Uhr:

      Hallo Timo, die zweite Abfrage haben wir eingebaut, da man u.a. im Safari über die obere Kante des Browsers hinweg scrollen kann. Damit ist der Wert kleiner Null und die Navigation verschwindet. Ich habe es gerade noch einmal ausprobiert und bei der von dir gekürzten Fassung kann ich somit einen Fehler provozieren, den ich mit unserer Variante nicht ausgelöst bekomme.

      Antworten
  14. Franz Meyer
    schrieb am 10.05.2017 um 15:33 Uhr:

    Sehr interessant! Kann man sicherlich mal gebrauchen.

    Könnte mir bitte jemand erklären, was das folgende bedeutet?

    script
    src=“https://code.jquery.com/jquery-1.12.4.min.js“
    integrity=“sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=“
    crossorigin=“anonymous“>
    script

    Antworten
    • Jonas Hellwig
      schrieb am 11.05.2017 um 10:17 Uhr:

      Hallo Franz, hier wird jQuery über ein CDN geladen. Die Attribute erklärt die jQuery-Doku wie folgt: »The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with.«

      Antworten
      • Franz Meyer
        schrieb am 12.05.2017 um 09:39 Uhr:

        Hallo Jonas, danke für deine Antwort! Schönen Tag noch!

  15. Markus
    schrieb am 09.05.2017 um 10:19 Uhr:

    Wirklich sehr cool und schön.

    Ich frage mich nur…
    Wie könnte man diese Sache umschreiben, wenn der Inhalt von „nav“ unbekannt ist.
    Also wenn man keine fixe Höhe angeben möchte, sondern diese sich u.U. durch den Inhalt ändern könnte?

    Jemand eine Idee?

    LG
    Markus

    Antworten
    • Jakob
      schrieb am 10.05.2017 um 11:18 Uhr:

      Hi Markus,

      dazu entfernst du aus die height Eigenschaft und änderst bei transform die „-100px“ in „-100%“. Also: transform: translate3d(0, -100%, 0);

      Demo: https://jsfiddle.net/cre06a09/

      Antworten
      • Markus
        schrieb am 10.05.2017 um 12:44 Uhr:

        Danke.
        Bin ich gestern auch noch draufgekommen ;-))

  16. Frank
    schrieb am 09.05.2017 um 09:07 Uhr:

    Sehr cooler Shorttip danke. Hab ich direkt Verwendung dafür :-)

    VG
    Frank

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →