Fixierte Container horizontal scrollen

1

Heute bin ich auf der Suche nach Bugs in meinem Theme auf ein Problem mit dem Header gestoßen. Dieser kann über eine Option im Admin-Bereich wahlweise am oberen Rand des Dokuments stehen und verschwindet beim vertikalen Scrollen (das ist jetzt bei LB-Projects der Fall) oder er ist am oberen Rand des Browserfensters fixiert und bleibt dort auch beim Herunterscrollen. Erzielt wird dieses Verhalten über die CSS-Eigenschaft position. Setzt man den Wert für position auf absolute, verhält sich die Kopfzeile wie auf LB-Projects. Wird der Wert auf fixed gesetzt, befindet sich der Header stets am oberen Rand des Browserfensters (s. Bild unten).

Vertikal Fixierter Header, der horizontal mitscroll

Das funktioniert auch einwandfrei, jedoch kommt es zu einem Problem beim horizontalen Scrollen. Wird das Browserfenster schmaler als der Seiteninhalt, erscheint üblicherweise ein Scrollbalken am unteren Fensterrand, mit dem die Seite horizontal verschoben werden kann. Bei einer absoluten Positioniereung funktioniert dies ohne Probleme, bei der fixen Positionierung jedoch srcollt zwar der Seiteninhalt, die Kopfzeile jedoch ist horizontal fixiert und scrollt nicht horizontal mit.

Eine Lösung für dieses Problem gibt es nur in Form eines kleinen jQuery-Skripts, welches den CSS-Wert left für den Header animiert. Scrollt der User jetzt nach rechts, so wird dem Header ein negativer Wert für left zugewiesen, sodass er sich ebenso wie der Inhalt der Seite nach links verschiebt. Somit erhält man das gewünschte Verhalten und der Header scrollt zwar vertikal nicht mit, dafür aber in der Horizontalen.

Das Skript hierfür sieht folgendermaßen aus.

//fixierten Header horizontal scrollen 
$(window).scroll(function(){
	$('#header').css('left', (-1) * $(this).scrollLeft());
});

Sofern Sie das Script für Ihre Anwendung nutzen wollen, müssen Sie darauf achten, den Namen des entsprechenden Containers in das Skript einzutragen. In diesem Fall wäre das der Container mit der ID #header.

Schlussendlich ergibt sich die Situation oben im Bild. Der Header ist am oberen Rand des Browserfensters fixiert und überlagert den Content. Hier greift die CSS-Eigenschaft position: fixed. In der Horizontalen allerdings scrollt die Kopfzeile je nach Bewegung des Scrollbalkens im gleichen Maße wie der Content nach links oder rechts. Das Verhalten der CSS-Eigenschaft position: fixed, den Header am linken Fensterrand zu fixieren, wird durch das Skript umgangen.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

1 Kommentar zu "Fixierte Container horizontal scrollen"

  • Dieter Grohn sagt:

    Bei mir klappt es nicht. Und warum funktioniert es auf dieser Seite auch nicht…:-((

    Dieter