Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022
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
Tvůrce
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í
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
9.12.2018 23:06
Avatar
Šimon Raichl
Tvůrce
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
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
Tvůrce
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.