Diskuze: top-bar fixed
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Neaktivní uživatel:29.12.2014 17:12
Když dáš něčemu fixní pozici, tak to překryje kus stránky. Proto
nastav tělu stránky padding-top na výšku toho fixního
menu, způsobí to, že se celá stránka posune a nic by se nemělo překrývat
Akceptované řešení
+20 Zkušeností
+2,50 Kč
+20 Zkušeností
+2,50 Kč
Matej:30.12.2014 22:48
Hádam to pomôže skús to
skopirovať a pozri sa čo to robí, potom si to podľa seba uprav 
stiahni si jquery knižnicu ( http://jquery.com/download/ ) a premenuj ju jquery.js aby to
fungovalo
<!DOCTYPE html>
<html ><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<style type="text/css">
html, body, .obsah {
height: 1000px;
}
header {
width: 100%;
min-height: 100px;
text-align: center;
}
nav {
background-color: #808080;
width: 80%;
min-height: 45px;
}</style>
</head>
<body>
<div class="obsah">
<nav style="top: 0px; position: relative;"></nav>
</div>
<script src="jquery.js"></script>
<script>
(function () {
var nav = $('nav');
var navOffset = nav.offset().top;
$(window).scroll(function () {
var winScroll = $(window).scrollTop();
if (winScroll > navOffset) {
nav.css({
position: 'fixed',
top: '0'
});
} else {
nav.css({ position: 'relative' });
}
console.log('nav: ' + navOffset);
console.log('win: ' + winScroll);
});
}());
</script>
</body></html>
Zobrazeno 8 zpráv z 8.
