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
<nav class=fixed-nav-bar>Pevně umístěná lišta</nav> <p style=height:15em>odstavec s textem <p style=height:15em>odstavec s textem <p style=height:15em>odstavec s textem <p style=height:15em>odstavec s textem <a href=# class=sipka onclick="window.scrollTo(0,0);return false;">^</a> <script> document.onscroll = function() { document.body.className = (( document.body.scrollTop + document.documentElement.scrollTop ) > 0) ? 'seda' : '';} </script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { margin: 0; } body { padding: 3em 1em; } .fixed-nav-bar { position: fixed; width: 100%; top: 0; left: 0; height: 3em; line-height: 3em; text-align: center; background: #fff; transition: .7s; } .seda .fixed-nav-bar { background: #ccc; } .sipka { display: none; position: fixed; right: 0; bottom:0; padding: 0 .5ex; background: #ff3; font-size: 2em; text-decoration: none; transition: .7s; } .seda .sipka { display: block; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>