Usuwanie i dodawanie klasy z CSS

Usuwanie i dodawanie klasy z CSS
Mattii4211
M4
Mattii4211
M4
  • Rejestracja:około 10 lat
  • Ostatnio:prawie 5 lat
  • Postów:221
0

Mam animację w CSS ze znikaniem i pojawieniem się menu:

Kopiuj
@keyframes disapperance {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 0; display: none;}
}

@-webkit-keyframes disapperance {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 0; display: none;}
}

@keyframes apperance {
    0% {opacity: 0; display: block;}
    50% {opacity: 0.5;}
    100% {opacity: 1; }
}

@-webkit-keyframes apperance {
    0% {opacity: 0; display: block;}
    50% {opacity: 0.5;}
    100% {opacity: 1; }
}

.disapperanceClass {
    -webkit-animation: 2s 1 disapperance;
    animation: 2s 1 disapperance;
    opacity: 0;
}

.apperanceClass {
    -webkit-animation: 2s 1 apperance;
    animation: 2s 1 apperance;
    opacity: 1;
}

i w JS chcę go użyć podczas przewijania strony:

Kopiuj
function hiddenMenu() {
    window.addEventListener('wheel', (e) => {
        if (e.isTrusted) {
            navbar.classList.toggle("disapperanceClass");
        }
    })

i teraz działa znikanie menu, natomiast gdy przed if dodam navbar.classList.remove("disapperanceClass"; navbar.classList.add("apperanceClass"); a wif navbar.classList.remove("apperanceClass"); to zupełnie nie działa i nie wiem dlaczego

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
aszczepanowski
AS
aszczepanowski
AS
  • Rejestracja:prawie 8 lat
  • Ostatnio:ponad 3 lata
  • Postów:17
2

Żeby sprawdzić obecność klasy w elemencie użyj:

Kopiuj
el.classList.contains('klasa');
edytowany 1x, ostatnio: cerrato
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Mattii4211
M4
Mattii4211
M4
  • Rejestracja:około 10 lat
  • Ostatnio:prawie 5 lat
  • Postów:221
0

Ok mały debugging pomógł:

Kopiuj
function hiddenMenu() {
    window.addEventListener('wheel', (e) => {
        if (e.isTrusted) {
            if(navbar.classList.contains("apperanceClass")) {
                navbar.classList.remove("apperanceClass");
                navbar.classList.add("disapperanceClass");
            } else {
                navbar.classList.remove("disapperanceClass");
                navbar.classList.add("apperanceClass");
            }
        }
    })
edytowany 1x, ostatnio: Mattii4211
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Mattii4211
M4
Mattii4211
M4
  • Rejestracja:około 10 lat
  • Ostatnio:prawie 5 lat
  • Postów:221
0

Jeszcze jedno pytanko, dlaczego kółko myszki nadal zmienia klasy, mimo iż nie jest spełniony warunek w if?

Kopiuj
window.onscroll = function () { stickyMenu() };

const navbar = document.querySelector("header");
const sticky = navbar.offsetTop;

function stickyMenu() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky");
        hiddenMenu();
    } else {
        navbar.classList.remove("apperanceClass");
        navbar.classList.remove("disapperanceClass");
        navbar.classList.remove("sticky");
    }
}
function hiddenMenu() {
    window.addEventListener('wheel', (e) => {
        if (e.isTrusted) {
            if (navbar.classList.contains("apperanceClass")) {
                navbar.classList.remove("apperanceClass");
                navbar.classList.add("disapperanceClass");
            } else {
                navbar.classList.remove("disapperanceClass");
                navbar.classList.add("apperanceClass");
            }
        }
    })
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto