nicht angemeldet
Navi fixieren
Hallo,
ich möchte bei meiner Website die Seit-Navi (Links) fixieren (position: fixed). Ich habe aber über der Navi und dem Inhalt einen Header-bereich (300px) mit einem Hintergrundbild. Momentan sieht es deshalb leider ziemlich blöd aus, wenn das Kopfbild weg ist und die Navi irgendwo in der Mitte rumhhängt. Auch reicht der Platz dann nicht.
Ich hätte es nun gerne so, dass beim Hochscrollen die Navi zunächst hochscrollt bis der Headerbereich aus dem Bildschirm verschwunden ist und erst dann fixiert wird.Geht das und wenn ja, wie?
Viele Grüße
Michael
-
Ich hätte es nun gerne so, dass beim Hochscrollen die Navi zunächst hochscrollt bis der Headerbereich aus dem Bildschirm verschwunden ist und erst dann fixiert wird.Geht das und wenn ja, wie?
Mit JavaScript.
http://de.selfhtml.org/javascript/objekte/window.htm#page_y_offset
-
Om nah hoo pez nyeetz, Michael!
Ich hätte es nun gerne so, dass beim Hochscrollen die Navi zunächst hochscrollt bis der Headerbereich aus dem Bildschirm verschwunden ist und erst dann fixiert wird.
Weil ich das für eine gute Anregung sowohl für brückentage.info als auch billiger-im-urlaub.de halte, hab ich mal ein bisschen umhergespielt.
Da die Internetexplorer 7 und 8 mit pageYOffset nichts anzufangen wissen und auch getComputedStyle nicht verstehen, habe ich eine zuverlässige Browserweiche gesucht (1. Ansatz: ).
Fast alle von mir getesten Browser, namentlich IE7, 8, FF3.6, Op11, Saf4 und Chr8 liefern das gewünschtes Ergebnis.
IE6 kannst du vergessen, weil er
position:fixed;nicht kennt.Interessanterweise ist der IE9 im "Dokumentmodus: IE9-Standards" (in meinem Fall unter Windows 7, 32bit IE9.0.7930.16406) nicht in der Lage, die ursprünglichen Eigenschaften des divs wieder herzustellen.
Das JS lässt sich sicher noch optimieren.
Matthias
--
-
Om nah hoo pez nyeetz,
ich hab um den IE9 auch bedienen zu können, einen anderen Ansatz gewählt: nämlich die Positionierung der Navigation bei absolute zu belassen und den top-Wert zu ändern.
Dies funktioniert zuverlässig in FF3.6, IE 7-9, Chr 8 und Saf4. Bei der ersten Variante gab es zudem noch das Problem, dass falls die Navigation länger ist als das Fenster hoch, die unteren Bereiche der Navigation nicht erreicht werden können.
Opera 11.01 hingegen stellt den unteren Bereich der "Navigation" während des Scrollens nicht mehr dar. Woran kann das liegen? Gibts da Abhilfe? Bei aktiviertem Dragonfly ist wunderlicherweise alles in Ordnung.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Om nah hoo pez nyeetz, Matthias Apsel!
Interessanterweise ist der IE9 im "Dokumentmodus: IE9-Standards" (in meinem Fall unter Windows 7, 32bit IE9.0.7930.16406) nicht in der Lage, die ursprünglichen Eigenschaften des divs wieder herzustellen.
Im aktuellen RC ist dieser Fehler behoben.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Om nah hoo pez nyeetz,
ich habe die Problemstellung in einem Artikel verarbeitet und bitte um Hinweise.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Om nah hoo pez nyeetz,
ratet doch mal, wo ich den Artikel versteckt habe ;-)
http://selfhtml.apsel-mv.de/scroll/scroll.html
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
-
-