Diskuze: Animace navu
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Zobrazeno 7 zpráv z 7.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
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");
}
});
Jinak to vybirani elementu dej idealne nekam mimo ten listener, at se zbytecne znova neselecti pri kazdym scrollnuti, to samy plati pro funkci toggleClasses.
Děkuju, funguje to. A mohl by jsi mi jen prosím ještě nějak stručně vysvětlit tuto část kódu?
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.
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.
Děkuju za pomoc
Zobrazeno 7 zpráv z 7.