Problem z classList.contains nie zabiera klasy

Tak jak w temacie chodzi mi tutaj o tego else if'a dodam, że do openMobileNav klasa jest dodawane przez toggle.

if (windowPosistion > 550) {
        burgerSpan.forEach((e) => {
            e.classList.add('black');
        });
    } else if (openMobileNav.classList.contains('active')) {
        burgerSpan.forEach((e) => {
            e.classList.remove('black');
        })
    } else {
        burgerSpan.forEach((e) => {
            e.classList.remove('black');
        })
    }

To dam cały plik najpierw. Chodzi o to ze po kliknięciu w burgerAnimation dodaje się klasa 'active' do openMobileNav i teraz gdy openMobileNav ma już ta klasę to na dole openMobileNav.classList.contains('active') powinno się odpalać a nie działa.

const burgerAnimation = document.querySelector('.app-nav--burger');
const openMobileNav = document.querySelector('.app-nav');
const navItems = document.querySelectorAll('.app-nav--item');
const burgerSpan = document.querySelectorAll('span');
burgerAnimation.addEventListener('click', () => {
    burgerAnimation.classList.toggle('app-nav--burger__active');
    openMobileNav.classList.toggle('active');
    navItems.forEach((e) => {
        e.classList.toggle('active-item');
    })
});
window.addEventListener('scroll', () => {
    let windowPosistion = window.scrollY;
    if (windowPosistion > 50) {
        openMobileNav.classList.add('menuColorScroll');
    } else {
        openMobileNav.classList.remove('menuColorScroll');
    };
    if (windowPosistion > 550) {
        burgerSpan.forEach((e) => {
            e.classList.add('black');
        });
    } else if (openMobileNav.classList.contains('active')) {
        burgerSpan.forEach((e) => {
            e.classList.remove('black');
        })
    } else {
        burgerSpan.forEach((e) => {
            e.classList.remove('black');
        })
    }
})

Ok tak w ogóle to pisz w odpowiedziach jak coś dotyczy tematu to tak po 1 , a po 2 to wywaliłem tego else if'a i dałem po prostu if'a z tym i działa tylko jakoś tak dziwnie.

const burgerAnimation = document.querySelector('.app-nav--burger');
const openMobileNav = document.querySelector('.app-nav');
const navItems = document.querySelectorAll('.app-nav--item');
const burgerSpan = document.querySelectorAll('span');
burgerAnimation.addEventListener('click', () => {
    burgerAnimation.classList.toggle('app-nav--burger__active');
    openMobileNav.classList.toggle('active');
    navItems.forEach((e) => {
        e.classList.toggle('active-item');
    })
});
window.addEventListener('scroll', () => {
    let windowPosistion = window.scrollY;
    if (windowPosistion > 50) {
        openMobileNav.classList.add('menuColorScroll');
    } else {
        openMobileNav.classList.remove('menuColorScroll');
    };
    if (windowPosistion > 550) {
        burgerSpan.forEach((e) => {
            e.classList.add('black');
        });
    } else {
        burgerSpan.forEach((e) => {
            e.classList.remove('black');
        })
    };
    if (openMobileNav.classList.contains('active')) {
        burgerSpan.forEach((e) => {
            e.classList.remove('black');
        })
    }
})