Kopfzeile fixieren, nur Hauptspalte scrollen

**freaky** · 10.05.2010, 14:20

Hallo Boardies,

heute seh ich glaub ich den Wald vor lauter Bäumen nicht. Ich hab eine ganz einfach gestrickte Website. Das Hintergrundbild ist so angelegt das es im oberen Kopfzeilenbereich dunkel ist und darauf befindet sich die Navigation - hell natürlich. Die ganzen Artikel wiederum sind dunkel angelegt - sieht jetzt natürlich doof aus wenn ich lange Artikel hab bei denen ich scrollen muß.

Lange Rede kurzer Sinn - was ich vorhabe -> Kopfzeile fixieren (kein Problem mit position: fixed im CSS) aber wie kann ich der Hauptspalte sagen das die beim scrollen den Text bei 120 pixel ausblenden soll???? Am tollsten wärs wenn das Ausblenden weich erfolgen würde - ist aber nicht zwingend.

Mit Iframe usw. dürfte das auch einfach sein - aber gibts dafür nicht irgendeinene CSS Formatierung oder was einfacheres???

Vielen Dank schon mal vorab
freaky

**Acta** · 10.05.2010, 14:29

Wie meinst du das mit dem Ausblenden?

Ich habe meiner Kopfzeile positonen fixed gegeben. Der Text der Hauptspalte scrollt nur und für den User sieht es so aus als würde er unter der Kopfzeile verschwinden.

**mkeipert** · 10.05.2010, 14:39

Wenn ich dich richtig verstehe, hilft dir z-index. Kopfzeile braucht dann höheren Index (10) als der Rest, dann verschwindet der Text unter der Kopfzeile.

Grüße
Mario

**Kayzu** · 10.05.2010, 15:32

also ich verstehe das so, als wollte der Thread-Ersteller einen "Puffer" haben, sprich einen Rand oben zwischen der Kopfzeile und dem Scrollenden Text, dass der Text schon z.b. 15px vor der Kopfzeile verschwindet.
Für dieses Problem hätte ich jetzt nicht wirklich einen Lösungsansatz.
Mit Padding wirst du da nichts erreichen.

**freaky** · 10.05.2010, 17:37

Zitat von Acta

Wie meinst du das mit dem Ausblenden?

Ich habe meiner Kopfzeile positonen fixed gegeben. Der Text der Hauptspalte scrollt nur und für den User sieht es so aus als würde er unter der Kopfzeile verschwinden.

so in der Richtung hab ich das eigentlich gemeint. Wieso funzt das bei mir nicht? Ich hab im Seitenlayout nur die Hauptspalte angegeben und natürlich eine Kopfzeile. Unten hab ich der Navigation die Kopfzeile zugewiesen und die Artikel der Hauptspalte. Muß ich dafür irgendwie eigene Layoutbereiche definieren?

Ich weis nicht ob mir z-index helfen kann dabei :-(

Es ist wie Kayzu schreibt - der Text soll quasi optisch unter dem Header verschwinden

freaky

**freaky** · 10.05.2010, 18:55

Achso - ich sollte vielleicht noch erwähnen das ich es schon mit overflow: scroll versucht habe für den Container. Allerdings hab ich da 2 Probleme - ich will die Höhe nicht definieren müssen da ich ja nicht weis wie die Auflösung des Users ist - Footer hab ich keinen den man lesen können müsste. Und das zweite Problem ist dann hab ich den Scrollbalken mitten durch das Bild - der soll schön auf der Seite bleiben!

**Acta** · 11.05.2010, 07:29

Genau die Kopfzeile hat einen Z-index bekommen. Im grunde genommen lieg der Header fest über der Hauptspalte beim Scorllen...

also meins schaut so aus:

HTML-Code:

#header
float:left;
position:fixed;
width:970px;
z-index:120

#main .inside
position: relative

Wobei ich mir nimmer ganz sicher bin ob du das Z-index überhaupt brauchst *lach*

**freaky** · 11.05.2010, 17:29

Danke - war trotzdem der richtige Ansatz - ich hab jetzt mal vorsichtshalber den z-index mit reingesetzt, Position fixed und natürich das Hintergundbild auch im Header verwenden, sonst gibts ein Chaos :-O

Problemchen ist somit gelöst!

freaky

**fall2out** · 30.04.2013, 07:52

Wo das hier gerade lese, gibt es eine Extension für Contao 3, welche die Navigation ab einer bestimmten Position fixieren lässt? Denn manchmal hat man ja vorher ein Headerbild oder ein Logo! z.B. http://www.pizza-flitza.de/shop/bramsche/ so

Danke im Voraus

**w3scout** · 30.04.2013, 08:03

Zitat von fall2out

Wo das hier gerade lese, gibt es eine Extension für Contao 3, welche die Navigation ab einer bestimmten Position fixieren lässt? Denn manchmal hat man ja vorher ein Headerbild oder ein Logo! z.B. http://www.pizza-flitza.de/shop/bramsche/ so

Danke im Voraus

ein Modul (Extension) nicht, aber ein HowTo: https://community.contao.org/de/show...cked-Navigtion

VG

**tblumrich** · 30.04.2013, 11:21

Zitat von fall2out

Wo das hier gerade lese, gibt es eine Extension für Contao 3, welche die Navigation ab einer bestimmten Position fixieren lässt? Denn manchmal hat man ja vorher ein Headerbild oder ein Logo! z.B. http://www.pizza-flitza.de/shop/bramsche/ so

Danke im Voraus

Es gibt auch das hier:
https://github.com/bigspotteddog/ScrollToFixed

Lässt sich auch easy ohne viel Verrenkungen in Contao einbauen.

Gruß
Thomas