Sticky Header in Contao

Jonathan Contao

Besonders bei umfangreichen Webseiten oder Onepagern ist es oftmals lästig, wieder hoch scrollen zu müssen, um zur Navigation zu gelangen. Eine Möglichkeit, dieses Problem zu umgehen, ist ein sticky Header, der an der Oberseite der Webseite fixiert ist. Während sich ein einfacher fixed Header noch mit .css umsetzen ließe, kann es jedoch nötig sein, nur bestimmte Bereiche zu fixieren, z.B. wenn die Seite noch eine Topbar enthält. Um diese weg zu scrollen und anschließend die Navigation zu fixen, kann eine „scroll-to-fixed“-Navigation eingebunden werden.

Das Ganze funktioniert mit einem kleinen Skript, das hier zu finden ist. Um alles in Contao zum Laufen zu bekommen, ist wie folgt vorzugehen:

1. Das Skript herunterladen und im Backend hochladen

2. Im Seitenlayout JQuery aktivieren

3. Im Seitenlayout im Head-Bereich das hochgeladene Skript verlinken:

 

4. Ebenfalls im Head-Bereich wird dann folgendes Skript eingebunden:

 

#Navigation wäre dabei durch die ID des Elements, das fixiert werden soll, zu ersetzen. Für die oben genannte Problematik könnte z.B. zwischen dem Header, der die Topbar enthält, und der Hauptspalte ein eigener Layoutbereich namens Navigation angelegt werden.

Jonathan

Jurist, Freizeit-Nerd, Webdesigner und Inhaber von jst-media.de

19 thoughts to “Sticky Header in Contao”

  1. Hallo, ich bin Contao „Anfänger“ habe eine Frage zu deinem Beitrag oben.

    Wo genau binde ich diesen Teil ein?
    “ $(document).ready(function(){
    $(„#Navigation“).sticky({topSpacing:0});
    }); “
    In der fe_page.html5, dort wird mir aber dann ein Fehler angezeigt!

    Danke schon einmal

    Antworten

  2. Hi Marc,

    eine direkte Einbindung in die fe_page ist doch gar nicht erforderlich. Du kannst eigenen JS-Code einfach über Themes / Seitenlayout einbinden, dort ist etwas weiter unten unter „Javascript“ ein extra Feld. Alternativ kannst du es auch in den Head-Bereich packen.

    Was im Beitrag allerdings fehlt, sind die

    Hab ich oben mal korrigiert.

    Ich hoffe, das hilft weiter.

    Antworten

    1. Huhu,

      der einfachste Weg wäre, das Skript einfach über die Dateiverwaltung hochzuladen (wie auch Bilder und andere Dateien). Sofern das nicht geht, könntest du in den Einstellungen noch überprüfen, ob die Dateiendung für den Upload gesperrt ist; standardmäßig sollte das aber nicht der Fall sein.

      Falls du noch Fragen hast, meld dich einfach nochmal – falls ich weiter helfen konnte, würd ich mich über ein Like o.ä. freuen 🙂

      Antworten

        1. Nein, das ist grds. egal – wichtig ist nur, dann bei der Einbindung des Scripts im Layout den richtigen Pfad anzugeben – in meinem Beispiel ist das ja „files/layout/jquery.sticky.js“. Die Dateiverwaltung speichert hochgeladene Dateien automatisch in „files/“, d.h. ich hatte da vorliegend einen Ordner „layout“ angelegt und dort die Datei „jquery.sticky.js“ hochgeladen. Wenn die Datei in ein anderes Verzeichnis hochgeladen wird, muss das entsprechend angepasst werden.

          Antworten

  4. Hallo,
    endlich mal klasse erklärt. Spitze!
    Vielen Dank!!!!
    Kleine Anmerkung: Das kleine Script einfach unter „Eigener JavaScript-Code“ einbinden. Dann sitzt es allerdings nicht im Headbereich…
    Total doof: Mit Mootools zusammen läuft es nicht. Kann man dagegen etwas tun?

    Antworten

    1. Ich hab leider auch keine Möglichkeit gefunden, das zusammen mit mootools zum Laufen zu bringen. Allerdings ist das technisch ohnehin nicht sooo schön, wenn 2 verschiedene JS-Bibliotheken eingebunden sind…

      Antworten

  5. Hallo, leider erhalte ich folgende Fehler bei dem Script:
    Uncaught TypeError: Cannot read property ’sticky‘ of null

    Das ist das Skript, welches ich bei dem Seitenlayout eingefügt habe.

    $(document).ready(function(){
    $(„#main-navigation“).sticky({topSpacing:0});
    }(jQuery));

    Hat jemand eine Idee, wo der Fehler liegt? „(jQuery)“ habe ich eingefügt, da ich sonst folgenden Fehler erhalten habe:

    Uncaught TypeError: $(…).ready is not a function

    Grüße
    Marko

    Antworten

  6. Hallo,

    vielen Dank erstmal für die Anleitung.

    Funktioniert auch soweit – habe im Header ein Logo + Menü.
    Das ganze bleibt auch oben fix stehen.
    Leider ist der Header aber beim scrollen hinter dem Content.

    Gibt es noch einen Trick damit der Header vor dem Content bleibt?

    Bin für jede Hilfe dankbar.

    Viele Grüße
    Jens

    Antworten

    1. Hallo Jens,

      du kannst mittels css festlegen, auf welcher Ebene ein Element angezeigt wird. Das Ganze nennt sich z-index, je höher der Wert, desto weiter ist ein Element im Vordergrund.

      #header {
      z-index:999;
      }

      sollte dein Problem beheben.

      Antworten

      1. Hallo Jonathan,

        vielen Dank für die schnelle Antwort.

        Das mit dem z-index habe ich auch vermutet – ist es aber leider nicht.
        Es ist nach wie vor so, als ob der Header komplett im Hintergrund ist.

        Ich verstehe es nicht.

        Danke Dir.

        Gruß
        Jens

        Antworten

  7. Huhu,

    #container {
    z-index:-1
    }

    würde das Problem bei mir fixen. Vorliegend setzt das Script nämlich für den Header folgenden Style:

    < header id="header" style="width: 1425px; position: fixed; top: 0px; z-index: auto;" >

    Ich vermute, dass sich das damit dann irgendwie beißt.

    Allerdings verstehe ich auch nicht so ganz, wieso das überhaupt mit javascript gelöst werden soll; wenn der Header oben immer sichtbar sein soll, ginge das ja auch einfach via css (position:fixed).

    Antworten

    1. Hi Jonathan,

      super – Danke – das mit dem -1 hat funktioniert.
      Vielen Dank.

      Das mit dem Java-Script war das erste was ich zu Contao und dem Fixed Header+Menü gefunden hatte.
      Mit css und fixed hatte ich auch schon probiert – aber da wird mir der Header nicht mal angezeigt.

      Jetzt funktioniert es erstmal. Werde aber weiter mit der reinen css-Lösung probieren.

      Danke Dir für Deine Hilfe.

      Viele Grüße
      Jens

      Antworten

      1. Hallo und Danke für den Tipp!

        Alternative Lösung: In der jquery.sticky.js gibt es im oberen Teil einige Variablen, die man anpassen kann, unter anderem auch für z-index. Hier steht standardmäßig zIndex: ‚auto‘. Das hat auch in meinem Fall dazu geführt, dass der restliche Content den Sticky-Bereich überlagert hat. Einfach hier den gewünschten Wert (z.B. ‚9999‘) eintragen, dann sollte es passen.

        Antworten

  8. Moin,

    habe den Sticky ausprobiert… funktionierte fast alles wie gewünscht.

    Ist es irgendwie möglich, die Sticky-Funktion bei bestimmten Breakpoints wieder auszuschalten?

    Habe beispielsweise ein Menü, das immer da sein soll…also es soll nicht im Hamburger verschwinden. Wenn ich jetzt Sticky definiere ist das auf einem Smartphone sehr platzeinnehmend 😉

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert