jQuery Sticky Footer für Contao

Sticky Footer ist eine Fußzeile, die sich tatsächlich am unteren Ende der Seite befindet, auch wenn der Inhalt dieser nicht ausreicht, um die Fußzeile an
oder unter den unteren Bildschirmrand zu „pushen“.

Wir haben eine leichte und dennoch starke Funktion in jQuery geschrieben, um dieses Problem zu lösen (hier die Slides zum Vortrag am Contao NRW Day 2016 in Dortmund).

Es gibt auch einige Mögklichkeiten einen Sticky Footer ausschließlich in CSS zu schreiben, allerdings ist das (auf Grund gestalterischer Vorgaben, z.B.) nicht immer möglich. Damit unsere Funktion auch sicher greift, empfehlen wir die vertikalen Abstände zwischen den Elementen #header, #container und #footer über padding-Werte der entsprechenden div.inside-Elemente zu steuern.

Dieses kurze Tutorial zeigt Euch, wie Ihr die Funktion in Euer Contao-Projekt implementiern könnt. Falls Ihr Fragen habt, so benutzt bitte die vorhandene Kommentarfunktion.

Um zu testen, ob Javascript beim User überhaupt aktiviert ist (wird für die CSS-Animation benötigt), gehen wir folgendermaßen vor:

Zuerst müssen wir uns im Klaren darüber sein, wann wird welche Funktion benötigt und unterscheiden hierbei zwischen $(document).ready() und $(window).load(). Den Javascript-Test brauchen wir noch bevor die Seite komplett geladen wurde, deshalb packen wir unsere "checkJS" Funktion in die functions.js, welche im <head> geladen wird und mit $(document).ready() aufgerufen wird.

Dem Theme, in dem jQuery Sticky Footer verwendet wird, geben wir dem "body" die Klasse "js_off" (s. Bild oben), welche durch die "checkJS" in "js_on" umgeschrieben wird, falls Javascript aktiv ist:

jQuery Sticky Footer einbinden

Die jQuery Sticky Footer Funktion binden wir im nächsten Schritt in unser Projekt (im Theme) ein, und geben diese im html-Dokument nach der Fußzeile aus (bitte den Pfad ggfls. abändern / anpassen).

Erst wenn alle Elemente geladen und aufgebaut wurden, können wir die tatsächliche Höhe dieser abfragen. Dewegen lassen wir wir unsere Sticky Footer Funktion erst beim $(window).load() feuern.

Die CSS-Animation

Um die Geschichte abzurunden bauen wir jetzt noch eine kleine Animation ein, welche die fertig platzierte Fußzeile stilvoll einblendet.

jQuery Sticky Footer downloaden (.zip)

Hier könnt Ihr Euch alle erwähnten Dateien herunterladen: jQuery Sticky Footer downladen. Das Package beinhaltet .js-Dateien, sowie die Animation in .css & .less. Gerne helfen wir bei der Imple­men­tierung der Funktion in Eure Projekte und freuen uns über Kritik, Lob, Anregungen und Wünsche.

Beste Grüße,
Dinko Skopljak

Zurück

Einen Kommentar schreiben