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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <link rel="stylesheet" type="text/css" href="testmnu.css"> </head> <body> <header> <div class="logo">STICKY MENU ON SCROLL!</div> <div class="intro">Some dumbass tagline goes here</div> <div class="menu">Menu goes here - home - links - blah blah</div> </header> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />(Bottom!) <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> // Create a clone of the menu, right next to original. $('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide(); scrollIntervalID = setInterval(stickIt, 10); function stickIt() { var orgElementPos = $('.original').offset(); orgElementTop = orgElementPos.top; if ($(window).scrollTop() >= (orgElementTop)) { // scrolled past the original position; now only show the cloned, sticky element. // Cloned element should always have same left position and width as original element. orgElement = $('.original'); coordsOrgElement = orgElement.offset(); leftOrgElement = coordsOrgElement.left; widthOrgElement = orgElement.css('width'); $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show(); $('.original').css('visibility','hidden'); } else { // not scrolled past the menu; only show the original menu. $('.cloned').hide(); $('.original').css('visibility','visible'); } } </script> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
* {font-family:arial; margin:0; padding:0;} .logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;} .intro {color:#777; font-style:italic; margin:10px 0;} .menu {background:#00a; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%;} .content {margin-top:10px;} .menu-padding {padding-top:40px;} .content {padding:10px;} .content p {margin-bottom:20px;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>