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="f();"> <div id=zustava> Zůstává vidět, dokud nedojede fiaový blok. </div> <div id=neco> <p>Něco mezi. </div> <div id=hranice> <p>Hranice, odkud se žlutá přilepí a dál nejede. <p>Text. <p>Text. <p>Text. <p>Text. </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { margin: 1.28em 0 0; } #zustava { position: fixed; width: 100%; top: 0; left: 0; background: #fc9; } #neco { padding: 5ex; background: #9cf; } #hranice { background: #c9f; } #hranice p { margin: 2em 0 8em; }
CSS
Autoformát
CSS reset
Až na konci
function f() { var jezdici = document.getElementById("zustava"); var vyskazustava = jezdici.offsetHeight; var pozicenezustava = document.getElementById("hranice").offsetTop; var aktualnipozice = (document.body.scrollTop + document.documentElement.scrollTop); if (aktualnipozice<=pozicenezustava-vyskazustava) { jezdici.style.position='fixed'; jezdici.style.top='0'; jezdici.style.left='0'; } else { jezdici.style.position='absolute'; jezdici.style.top=pozicenezustava-vyskazustava+'px'; jezdici.style.left='0'; }; };
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>