NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: MENU - následování až po určité vzdálenosti

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Nakaii
Člen
Avatar
Nakaii:1.5.2016 14:04

Ahoj, potřeboval bych poradit ohledně menu, které je pevně zafixované na stránce. Jde o to, že na začátku mám určitý nadpis, a když sjedu se stránkou níž tak je právě mezi vrchem stránky a tím menu místo, které tam nechci. Potřeboval bych tedy aby to menu začalo jed dolů až po určité vzdálenosti, v mém případě až bych sjel z toho nadpisu. Snad jsem to vysvětlil dobře :)
Předem děkuji za odpověď
HTML MENU

<ul>
  <li><a href="default.asp">Domů</a></li>
  <li><a href="news.asp">Blog</a></li>
  <li><a href="contact.asp">Články</a></li>
  <li><a href="about.asp">Náš tým</a></li>
</ul>
</div>

CSS

/**MENU**/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: left;
    padding: 14px 26px;
    text-decoration: none;

}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: green;
}
.active {
    background-color: #4CAF50;
}
ul {
    position: fixed;
    top: 150px;
    width: 100%;
}
 
Odpovědět
1.5.2016 14:04
Avatar
Jakub Klindera
Člen
Avatar
Jakub Klindera:1.5.2016 22:11

Zkopíruj tu prosím celý html kód. Ať vidíme ten tvůj

div
 
Nahoru Odpovědět
1.5.2016 22:11
Avatar
Petr Čech
Tvůrce
Avatar
Petr Čech:1.5.2016 23:32

Jmenuje se to sticky menu, myslím, že je to na to někde tutoriál

Nahoru Odpovědět
1.5.2016 23:32
the cake is a lie
Avatar
Petr Čech
Tvůrce
Avatar
Petr Čech:1.5.2016 23:33

Tady: http://www.itnetwork.cz/…nu-a-sidebar

Nahoru Odpovědět
1.5.2016 23:33
the cake is a lie
Avatar
Nakaii
Člen
Avatar
Nakaii:3.5.2016 17:25

Děkuji za odpověď.
Bohužel se mi to nedaří nějak přidat.
Přidám vždy do kódu ten script, co je zde: http://www.itnetwork.cz/…nu-a-sidebar

<script>
function fixMenu()
   {
   var menu_place = $('#MENU').offset().top;
   var menu = $('nav');
   $(window).scroll(function(){ ... });
   var scroll_top = $(window).scrollTop();
   if ( scroll_top > menu_place )
        if ( scroll_top > menu_place )
   {
      CSS.css({ 'position': 'fixed', 'top': 0 });
   }
else
   {
      CSS.css({ 'position': 'relative' });
   }

Jenže to nefunguje. A když ten skript ukončím až za tím menu, tak mi zase to celé menu zmizí.
Nevíte, kde můžu dělat chybu?
Děkuji.

 
Nahoru Odpovědět
3.5.2016 17:25
Avatar
Martin Štěpánek
Tvůrce
Avatar
Odpovídá na Nakaii
Martin Štěpánek :3.5.2016 18:27

Vložil jsi před to jQuery (i UI) a voláš funkci fixMenu() po načtení stránky? :-)

Nahoru Odpovědět
3.5.2016 18:27
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Nakaii
Člen
Avatar
Nakaii:3.5.2016 20:02

Promin, vůbec nevím co tím myslíš. Jsme začátečník, tak mě omluv prosím ;)

 
Nahoru Odpovědět
3.5.2016 20:02
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Nakaii
Honza Bittner:4.5.2016 13:22

Měl bys tam mít toto. Ve $(function(){}); se píše kód, který se vykoná po načtení stránky. Samotná funkce fixMenu() ti totiž nic dělat nebude, musíš jí někde spustit, čímž se zaregistruje scroll event atp...

$(function(){
        fixMenu();
});

function fixMenu()
{
        var menu_place = $('#menu').offset().top;
        var menu = $('nav');

        $(window).scroll(function(){

                var scroll_top = $(window).scrollTop();

                if ( scroll_top > menu_place )
                        {
                                menu.css({ 'position': 'fixed', 'top':0 });
                        }
                else
                        {
                                menu.css({ 'position': 'relative' });
                        }
        });
}
Nahoru Odpovědět
4.5.2016 13:22
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.