Как сделать, чтобы плавающее меню меняло background-color 2 раза при прокрутке страницы без jguery?

Question

[kiril123]

window.onscroll = function () { scrollFunction() };

function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
document.getElementById("menu").style.padding = "10px 0px";
document.getElementById("menu").style.background = "rgb(245,245,245)";
document.getElementById("menu").style.transition = "1s";


}
else if (document.body.scrollTop > 70 || document.documentElement.scrollTop == 70) {
document.getElementById("menu").style.padding = "10px 0px";
document.getElementById("menu").style.background = "black";
document.getElementById("menu").style.transition = "1s";

}
else {
document.getElementById("menu").style.padding = "30px";
document.getElementById("menu").style.background = "rgba(0,0,0,0)";

}

};

Answer 1

[FrelFrloich]

Отрегулируйте, условий прибавьте.

const header = document.querySelector('.header')
    window.onscroll = () => {
        const anyScroll = scrollY
        if (anyScroll > 200) {
            header.classList.add('header-whitel')
        } else {
            header.classList.remove('header-red')
        }
    }