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="fixni-menu"> <nav class="nav"> <li><a href="#">Odkaz</a></li> <li><a href="#">Odkaz</a></li> <li><a href="#">Odkaz</a></li> <li><a href="#">Odkaz</a></li> <li><a href="#">Odkaz</a></li> </nav> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.nav { list-style: none; padding: 0; margin: 0; text-align: center } .nav li {display: inline} .nav a {text-decoration: none; border-bottom: 0; background: #fff; padding: 5px; display: inline-block; width: 100px; line-height: 40px} .fixni-menu {position: fixed; left: 0; top: 0; width: 100%; background: #8ECCF0; text-align: center;} html{ height:1500px; }
CSS
Autoformát
CSS reset
Až na konci
var menu = document.getElementById('fixni-menu'); window.onscroll = function () { menu.className = ( document.documentElement.scrollTop + document.body.scrollTop > menu.parentNode.offsetTop && document.documentElement.clientHeight > menu.offsetHeight ) ? "fixni-menu" : ""; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>