Besonders wenn es auf Webseiten viele Inhalte zu veröffentlichen gibt, kann es sehr störend sein, wenn die Navigation beim Scrollen aus dem Viewport verschwindet. Eine Scroll to fixed Navigation, bei der die Haupt- oder sonstige Menüleiste am oberen Bildschirmrand stehen bleibt ist aus meiner Sicht daher sehr benutzerfreundlich und insbesondere bei langen Seiten zu empfehlen.
Auf Github gibt es ein hilfreiches Script zum Bau einer scroll to fixed Navigation
Download hier
So gehst du beim Einbau vor
- Lade das .zip herunter und entpacke es lokal auf deinem Rechner.
- Erstelle einen Ordner (z.B. mit dem Namen „JS“) und übertrage via FTP die Datei „jquery-scrolltofixed.js“
- Gehe via Themes ==> in das für deine Seite aktive Seitenlayout und verlinke die Javascript-Datei bei zusätzliche head-tags z.B. wie folgt:
<script src="files/js/jquery-scrolltofixed.js" type="text/javascript"></script>
Achte darauf, dass der Pfad richtig angegeben ist! - Aktiviere jQuery im Seitenlayout. (Evtl. auf die Versionen achten)
- Nun musst du noch das Skript aktivieren. Dazu gehst du in der Werkzeugleiste links zu „Templates“ und erstellst eine Kopie der zentralen Seitenvorlage fe_page.
- Im heruntergeladenen .zip-Archiv findest du eine html-Datei „test.html“. Öffne diese Datei mit einem Text- oder html-Editor und kopiere die Zeilen 95 bis 136 in die Zwischenablage deiner Maus und füge den Inhalt anschließend in die neue fe_page im head vor dem Ende des Head-Bereiches ein.
- Jetzt musst du noch schauen, wie der Bereich, in der deine Hauptnavigation eingefügt ist, heißt und die ID oder Klasse ermitteln. Sitzt die Naviagtion im #header und möchtest du, dass der ganze #header am oberen Bildschirmrand gefixed wird, dann musst du in Zeile 102 die Id #test gegen #header oder .header ersetzen. Möchtest du, dass nur die Navigation gefixed wird, gibst du stattdessen die ID der Navigation an. Ich verwende in solchen Fällen gerne eigene Layoutbereiche wie z.B. #subheader und füge hier nur die Navigation und nichts anderes ein.
- Anschließend musst du nur noch die Gestaltung deiner Navigation im gefixten Zustand via CSS anpassen.
- Das Ganze funktioniert auch, wenn du einen sticky-Footer haben möchtest
Hallo Jutta.
Erstmal großes Danke für diese Anleitung.
Jedoch ist mit diesem Skript bei mir ein Problemschen aufgetaucht. Sobald ich die Erweiterung „cm_alternativeforms“ nutzen möchte muss ich das MooTools-Template „moo_jquery_nc.html5“ im Seitenlayout aktivieren das die Erweiterung läuft. Nur funktioniert dann auch das Skript „jquery-scrolltofixed.js“ nicht mehr. Die Meldung des Browsers „Uncaught TypeError: Object # has no method ‚ready‘ (anonymous function)“, also die Funktion wird nicht mehr erkannt.
Ich habe mich nun bestimmt 3 Stunden damit beschäftigt und bekomme es nicht behoben. Alle relevanten Häkchen von „jQuery und MooTools laden“ sowie dessen „Quelle & Version“ sind gesetzt, ich habe alle Varianten ausprobiert. Auch bei beiden Quelltexten konnte ich keinen nennenswerte Treffer landen.
Vielleicht hast du ja von dem Problem schonmal gehört. Wäre super wenn du eine Lösung hast und mir helfen kannst. Grüße aus Sachsen.
P.S.: Contao Version 2.11.12
Hallo Jutta,
vielen Dank für dieses Tutorial!
Leider funktioniert das Skript bei meiner 3.3er-Installation auch nicht bzw. es „zerschießt“ mir mein Layout und einige andere dynamische Elemente wie Slider und Galerie-Effekte werden dadurch blockiert.
Ich setze daher ein anderes, einfacheres jQuery-Plugin ein, das anderen vielleicht auch schon ausreichen würde: http://stickyjs.com/. Die Integration erfolgt analog zu deiner Beschreibung, es muss lediglich #sticker durch die eigene, zu fixierende Id oder Klasse ersetzt werden – fertig. Vielleicht hilft’s jemandem ;-)
Grüßle
Claudia
Hallo Claudia – vielen Dank für deine wertvolle Ergänzung. Dass die o.g. Anleitung später nicht mehr überall funktionierte, habe ich leider auch feststellen müssen.
Nichts bleibt wie es ist. ;-)