Fixe Navigation nach Full-Screen Header

irenehofer · #1 (**permalink**) 01.12.2015, 16:15

Auf einer One-Page Seite verwende ich zum Einstieg einen Full-Screen Header mit folgendem Code:

Code:

#hero {
   background-image:url(../images/hero.jpg);
   background-size:cover;
   position:relative;
   height:100vh;
}

Im Anschluss an diesen Header folgt die Navigation, welche dann aber mitscrollen soll. Also die Navigation soll nach der Gesamthöhe des Bildschirms mitscrollen. Irgendwelche Hinweise?

dazzle89 · #2 (**permalink**) 01.12.2015, 16:21

Ich würde mit Javascript die Höhe des Browserfensters und die Scrollposition abfragen. Dafür findest du genug Scripte bei Google.

Und sobald man bis unter das Bild gescrollt hat, könntest du der Navigation z.B. eine Klasse geben, die dann position: fixed hat.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
Navigation ist nicht mittig	Schokokrapfen	CSS	29	19.09.2011 23:19
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29