| Autor | Zpráva | ||
|---|---|---|---|
| The Anonym Profil * |
#1 · Zasláno: 29. 6. 2014, 13:59:23
Ahoj, zaujíma ma či sa dá docieliť takého alebo aspoň podobného efektu iba s CSS ako je napr. na www.hokejovysvet.sk/, http://minutky.sk/ a na iných stránkach.
Menu je posunuté od vrchu stránky a má normálnu pozíciu, keď sa ale scrolluje dole a menu dosaihen vrchol okna tak sa zmení pozícia na position: fixed; Ako toho docieliť? |
||
| Taps Profil |
#2 · Zasláno: 29. 6. 2014, 14:20:27
The Anonym:
viz http://jecas.cz/fixni-menu |
||
| CZghost Profil |
#3 · Zasláno: 29. 6. 2014, 14:22:54
Taps:
Díky :) |
||
| The Anonym Profil * |
#4 · Zasláno: 29. 6. 2014, 14:41:25
Stále mi to nefunguje.
CSS: .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 a JS: <script>
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" : "";
}
</script>
<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>
|
||
| juriad Profil |
#5 · Zasláno: 29. 6. 2014, 14:43:51
Script přesuň až pod <div> s fixním menu. V době, kde provádí totiž ještě id fixni-menu neexistuje.
|
||
| Taps Profil |
#6 · Zasláno: 29. 6. 2014, 14:48:59
|
||
| juriad Profil |
#7 · Zasláno: 29. 6. 2014, 14:57:29
Taps:
Funguje ti to protože zadáváš JavaScript zvlášť a nevědomky tak využíváš vymakanosti systému kod.djpw.cz. |
||
| CZghost Profil |
#8 · Zasláno: 29. 6. 2014, 15:25:14
juriad:
Ono je nejlepší, když takové skripty se přesouvají až na konec stránky před ukončovací tag </body>. Potom se nemusí řešit, že něco nefunguje.
|
||
| The Anonym Profil * |
#9 · Zasláno: 29. 6. 2014, 15:38:38
Super, funguje! Vďaka
|
||
|
Časová prodleva: 10 let
|
|||
0