bubble: fixe Menüleiste, beim Scrollen, Leiste "anheften"

Beitrag lesen

SELF-Forum

fixe Menüleiste, beim Scrollen, Leiste "anheften"

bubble
– Informationen zu den Bewertungsregeln

Hey,

ich bin ja immer wieder erstaunt was mit CSS3 alles möglich ist, nun will ich fragen ob folgendes auch über reines CSS möglich ist:

Angenommen man hat auf der Seite einen Header,darunter die Menüleiste und darunter dann der Seiteninhalt à la

  
<body>  
	<div id="header">...</div>  
	<nav>...</nav>  
	<div id="content">...</div>  
</div>

mit dem CSS, dass die Navigation fixed ist. Wenn man nun auf der Seite scrollt, bleibt ja immer "Luft" zwischen Menüleiste und oberen rand des Viewports.
Wenn man aber nach unten scrollt, sollte sich diese bis nach oben an den Rand bewegen, wenn man wieder nach oben scrollt, soll sie dann wieder zurück.

Hier mal ein wenig Pseudo-CSS:

  
#header { height: 50px };  
nav {  
	position: fixed;  
	top: max(calc(50 - getScrollY()),0);  
}

Momentan benutze ich dafür JavaScript, da dieses aber wiederum von nicht zu wenigen verpöhnt wird, suche ich nach einem CSS weg.

MfG
bubble

Beitrag melden
–
Informationen zu den Bewertungsregeln