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
<body onscroll=posun()> <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; } #menu { height: 2em; /* výška menu */ background: gold; top: 150px; /* výška záhlaví */ left: 0; width: 100%; line-height: 2em; position: absolute; }
CSS
Autoformát
CSS reset
Až na konci
function posun() { var element = document.getElementById('menu'); var posun = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0); if (posun > 150) { element.style = 'position: fixed; top: 0;'; } else { element.style = 'position: absolute; top: 150px;'; /* 150 px = výška záhlaví */ } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>