Využij akce až 30 % zdarma při nákupu e-learningu. Více informací. Zároveň je tento týden sleva až 80 % na e-learning týkající se C# .NET
Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
Avatar
Vojta Korduliak:9.12.2018 22:23

Ahoj,
Snažím se udělat navigační panel, který bude měnit svou velikost v závislosti na scrollování. Už se mi něco podařilo vytvořit, jenže vždy ta změna funguje pouze 2x a pak už panel scroll ignoruje.

Zkusil jsem: Zatím jsem vytvořil toto

 
Odpovědět
9.12.2018 22:23
Avatar
Šimon Raichl
Redaktor
Avatar
Odpovídá na Vojta Korduliak
Šimon Raichl:9.12.2018 23:06

Ahoj, problem je v tom, ze tam nemazes ty classy z navu, zkus toto:

window.addEventListener("scroll", () => {
    const nav = document.querySelector("nav");
    const lis = document.querySelectorAll("nav > ul > li");

    const toggleClasses = (add, remove) => {
        nav.classList.add(add);
        nav.classList.remove(remove);
        lis.forEach(li => {
            li.classList.add(`${add}li`);
            li.classList.remove(`${remove}li`);
        });
    };

    if (window.scrollY > 0) {
        toggleClasses("scrolled", "unscrolled");
    }
    else {
        toggleClasses("unscrolled", "scrolled");
    }
});
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět
9.12.2018 23:06
Avatar
Šimon Raichl
Redaktor
Avatar
Šimon Raichl:9.12.2018 23:16

Jinak to vybirani elementu dej idealne nekam mimo ten listener, at se zbytecne znova neselecti pri kazdym scrollnuti, to samy plati pro funkci toggleClasses.

 
Nahoru Odpovědět
9.12.2018 23:16
Avatar
Odpovídá na Šimon Raichl
Vojta Korduliak:11.12.2018 6:04

Děkuju, funguje to. A mohl by jsi mi jen prosím ještě nějak stručně vysvětlit tuto část kódu?

 
Nahoru Odpovědět
11.12.2018 6:04
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:11.12.2018 11:25
toggleClasses = (xxx_add, xxx_remove)
...
nav.classList.add(xxx_add); // pridej class
nav.classList.remove(xxx_remove); // smaz class
...
lis = document.querySelectorAll("nav > ul > li"); // seznam vsech <li> v elementech <nav><ul> (pokud mas na strance 2x <nav>, tak ti to asi nebude fungovat podle ocekavani)
...
        lis.forEach(li => { // pro kazde LI
            li.classList.add(`${xxx_add}li`); // pridej class xxx_add+'li' (jestli to spravne chapu)
            li.classList.remove(`${xxx_remove}li`); // smaz class xxx_remove+'li'
        });

Ale tenhle druh js nepozivam, prijde mi zmateny :)
ta cast s foreach by tam ani nemusela byt, ci myslim. staci zmenit class pro nav.

Editováno 11.12.2018 11:27
 
Nahoru Odpovědět
11.12.2018 11:25
Avatar
Šimon Raichl
Redaktor
Avatar
Odpovídá na Peter Mlich
Šimon Raichl:11.12.2018 12:28

Ten foreach by tam nemusel byt v pripade, ze by v css setoval styly pro li podle toho, jakou classu ma nav, kazdopadne ja mu to nechtel nejak upravovat, tudiz jsem mu to jen prepsal aby mu to fungovalo, tak jak on si to napsal v CSS.

 
Nahoru Odpovědět
11.12.2018 12:28
Avatar
Vojta Korduliak:14.12.2018 23:11

Děkuju za pomoc

 
Nahoru Odpovědět
14.12.2018 23:11
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 7 zpráv z 7.