Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id=hlavicka> záhlaví 150 px <div id=menu>menu</div> </div> <p>1<p>2<p>3<p>4<p>5<p>6<p>7<p>8<p>9<p>0 <p>1<p>2<p>3<p>4<p>5<p>6<p>7<p>8<p>9<p>0 <p>1<p>2<p>3<p>4<p>5<p>6<p>7<p>8<p>9<p>0 <p>1<p>2<p>3<p>4<p>5<p>6<p>7<p>8<p>9<p>0
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { margin: 0; } #hlavicka { padding-bottom: 2em; /* výška menu */ background: silver; height: 150px; position: relative; } /* styly pro výchozí stav */ #menu { height: 2em; /* výška menu */ background: gold; top: 150px; /* výška záhlaví */ left: 0; width: 100%; line-height: 2em; position: absolute; } /* změněné styly pro odskrolovaný stav */ #menu.skrolovano { position: fixed; top: 0; }
CSS
Autoformát
CSS reset
Až na konci
var element = document.getElementById('menu'); function pozice() { var posun = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0); if (posun > 150) { element.className = 'skrolovano'; } else { element.className = ''; } } window.onscroll = pozice;
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>