jQuery fixed on top für Contao

Anleitung für Contao 5.3

In modernen Weblayouts ist es oft gewünscht, dass bestimmte Inhalte beim Scrollen fixiert bleiben. Dazu zählen beispielsweise Navigationsleisten, Suchfelder, Buttons oder Hinweisboxen. Mit jQuery lässt sich dieses Verhalten einfach umsetzen. Für Contao stehen dafür zwei kleine JavaScript-Lösungen bereit, die als Templates eingebunden werden können: j_sticky_fixed_header.html5 und j_sticky_fixed_top.html5.

Die Agentur Zentral GmbH realisiert professionelle Webseiten für Unternehmen. Auch bestehende Webseiten werden individuell angepasst und weiterentwickelt.

Anfrage stellen

Funktionsweise der Scripte

1. Script j_sticky_fixed_header.html5

Dieses Script sorgt dafür, dass ein Element mit der Klasse .fixed-on-top nicht direkt am oberen Bildschirmrand fixiert wird, sondern unterhalb des Elements #header.

Der Ablauf im Detail:

  • Das Script ermittelt die ursprüngliche Position des fixierten Elements sowie die Höhe des Headers (#header).
  • Beim Scrollen prüft jQuery, ob der Scrollwert größer ist als die Ausgangsposition des Elements abzüglich der Headerhöhe.
  • Falls ja, erhält das Element .fixed-on-top die zusätzliche CSS-Klasse .fixed und wird mit top: header direkt unterhalb des Kopfbereichs positioniert.
  • Gleichzeitig wird für das nachfolgende Element mit .fixed-on-top-item ein Abstand in Höhe des fixierten Elements erzeugt. Dadurch verschiebt sich das Layout nicht unkontrolliert nach oben.
  • Wird wieder nach oben gescrollt, entfernt das Script alle gesetzten Klassen und Styles, sodass das Element an seiner ursprünglichen Position steht.

Einsatzgebiet:

Ideal für Webseiten mit einem festen Kopfbereich (Logo, Navigation), bei denen weitere Inhalte darunter dauerhaft sichtbar bleiben sollen.

<script>
$(document).ready(function() {
  var top = $('.fixed-on-top').offset().top;
  var header = $('#header').height();
  var height = $('.fixed-on-top').height();
  $(window).scroll(function(){
	if ($(this).scrollTop() > top - header) {
		$('.fixed-on-top').addClass('fixed');
		$('.fixed-on-top').css('top', header);
		$('.fixed-on-top-item').addClass('fixed');
		$('.fixed-on-top-item').css('margin-top', height);
	} else {
		$('.fixed-on-top').removeClass('fixed');
		$('.fixed-on-top').css('top', '');
		$('.fixed-on-top-item').removeClass('fixed');
		$('.fixed-on-top-item').css('margin-top', '');
	}
  });
});
</script>

2. Script j_sticky_fixed_top.html5

Dieses Script arbeitet ähnlich, verzichtet jedoch auf den Bezug zum Header. Das Element wird direkt am oberen Bildschirmrand fixiert.

Der Ablauf im Detail:

  • Ausgangsposition und Höhe des Elements werden bestimmt.
  • Sobald der Scrollwert größer ist als die ursprüngliche Position, wird das Element mit .fixed-on-top fixiert.
  • Auch hier erhält das nachfolgende Element .fixed-on-top-item einen Abstand, um Layout-Verschiebungen zu verhindern.
  • Beim Zurückscrollen wird das Element wieder an seiner ursprünglichen Stelle angezeigt.

Einsatzgebiet:

Geeignet für Inhalte, die unabhängig vom Header jederzeit am oberen Bildschirmrand sichtbar sein sollen – beispielsweise eine fixe Call-to-Action-Leiste oder ein Hinweisbanner.

<script>
$(document).ready(function() {
  var top = $('.fixed-on-top').offset().top;
  var height = $('.fixed-on-top').height();
  $(window).scroll(function(){
	if ($(this).scrollTop() > top ) {
		$('.fixed-on-top').addClass('fixed');
		$('.fixed-on-top').css('top');
		$('.fixed-on-top-item').addClass('fixed');
		$('.fixed-on-top-item').css('margin-top', height);
	} else {
		$('.fixed-on-top').removeClass('fixed');
		$('.fixed-on-top').css('top', '');
		$('.fixed-on-top-item').removeClass('fixed');
		$('.fixed-on-top-item').css('margin-top', '');
	}
  });
});
</script>

Unterschiede im Überblick

Script Fixierung an Position Typischer Anwendungsfall
j_sticky_fixed_header.html5 Direkt unterhalb des #header Navigations- oder Funktionsleisten unterhalb der Hauptnavigation
j_sticky_fixed_top.html5 Ganz oben am Bildschirmrand Banner, Hinweisleisten, schmale Toolbars

Einbindung in Contao

Die Integration in Contao erfolgt in drei einfachen Schritten:

  1. Template anlegen
    • Im Contao-Template-Ordner eine Kopie von j_sticky_fixed_header.html5 oder j_sticky_fixed_top.html5 erstellen.
    • Das gewünschte Script einfügen.
  2. Template einbinden
    • Im Seitenlayout im Bereich jQuery-Templates das zuvor angelegte Template auswählen.
  3. Klasse vergeben
    • Dem gewünschten Element im Inhaltselement die CSS-Klasse .fixed-on-top hinzufügen.
    • Optional: Das nächste Element erhält die Klasse .fixed-on-top-item, damit der Layoutfluss korrekt bleibt.

CSS-Beispiel für die Fixierung

Damit die Funktion korrekt arbeitet, ist ein kurzes CSS notwendig:

.fixed {
  position: fixed;
  width: 100%;
  z-index: 1000;
}

Dieses Beispiel fixiert das Element dauerhaft sichtbar, sorgt für volle Breite und garantiert mit z-index, dass es nicht von anderen Elementen überlagert wird.

Fazit

Mit wenigen Zeilen jQuery lassen sich Elemente elegant am oberen Bildschirmrand oder unterhalb des Headers fixieren. Die Integration in Contao ist unkompliziert und erfordert lediglich ein zusätzliches Template sowie die Zuweisung einer CSS-Klasse. Dadurch lassen sich Navigationsleisten, Hinweisboxen oder Call-to-Action-Elemente benutzerfreundlich hervorheben und dauerhaft im Blickfeld halten.

Zurück zur Blog-Übersicht