Zmiana koloru po przeskrolowaniu

Cześć, chcę zrobić żeby menu po przeskrolowaniu zmieniło background na czarny mam coś takiego dodam , że console.loga wykrywa. Chyba nie może znaleźć klasy , mam ją w main.scss , która jest kompilowana przez php na styl wewnętrzny. I pytanie ponieważ, żeby nadpisać styl bootstrap'a do nava musiałem dodać !important do background-color: transparent czy może to być przyczyną ?

window.onscroll = function () {
    const navbar = document.querySelector('#navbar');
    if (window.scrollTop > 0) {
        navbar.classList.add("black");
    }
    console.log("siema");
};

.black {
    background-color: black;
}

Jeżeli masz jakąś własność zdefiniowaną jako !important, to nie nadpisze jej żaden inny styl pozbawiony !important, więc tej klasie "black" też możesz przypisać.

Ale ogólnie to niedobra praktyka, a twój problem z przerabianiem Bootstrapowych styli wynikał prawdopodobnie z tego, że tamtejszy styl był opisany jakiś dłuższym łańcuchem selektorów typu:
DIV.jakiś > DIV.inny > DIV.menu {deklaracje}
a taki zapis ma wyższy priorytet niż późniejsze proste nadpisanie:
DIV.menu {deklaracje}

https://jsfiddle.net/we9L9h2r/
https://codepen.io/Smakosh/pen/WaRVmE
https://codepen.io/carasmo/pen/ZmQQYy

https://codepen.io/anon/pen/wRddKw Czemu document.querySelectorAll nie działa w tym przypadku ? I po dodaniu all nie działa przez to span

Ok dałem już sobie radę tutaj jest rozwiązanie

const navbar = document.querySelector('.navigation');
const div = document.querySelector('#navbarNav');
const listItem = div.querySelectorAll('.nav-link');
const navSpan = document.querySelector('#nav-span');
window.addEventListener('scroll', function (e) {
    const lastPosition = window.scrollY;
    if (lastPosition > 50) {
        navbar.classList.add('active');
        listItem.forEach(function (e) {
            e.classList.add('active-a');
        });
        navSpan.classList.add('span-active');
    } else if (navbar.classList.contains('active')) {
        navbar.classList.remove('active');
        listItem.forEach(function (e) {
            e.classList.remove('active-a');
        });
        navSpan.classList.remove('span-active');
    } else {
        navbar.classList.remove('active');
        listItem.forEach(function (e) {
            e.classList.rempve('active-a');
        });
        navSpan.classList.remove('span-active');
    }
});