Changing Header/Navbar Elements on Scroll

Question

Currently struggling to add the .is-active class to my header via javascript. If you add "is-active" to the header classes it works well. But I can't seem to work it out in javascript.

I just want the class to be added as soon as you start scrolling, and then removed when returning to the top.

Appreciate all the help!

HTML:

<header class="header">
        <div class="header-nav flex container">

            <figure class="header-logo">
                <a href="#">
                    <img class="header-logo-light" src="images/logoWhite.png" alt="San Miguel Services Logo">
                    <img class="header-logo-dark" src="images/logoDark.png" alt="San Miguel Services Logo">
                </a>
            </figure>

            <nav class="header-menu flex">
                <div class="header-menu-li">
                    <a href="">WELCOME</a>
                    <a href="">SERVICES</a>
                    <a href="">ABOUT</a>
                    <a href="">PORTFOLIO</a>
                    <a href="">CONTACT</a>
                </div>
            </nav>

            <div class="header-btn">
                <button href="#" class="button header-btn">REQUEST A QUOTE</button>
            </div>

        </div>
    </header>

CSS:

.header {
    position: fixed;
    z-index: 1;
    width: 100vw;
    line-height: 18px;
}

.header .header-logo-dark {
    opacity: 0;
    display: none;
}

.header .header-logo-light {
    opacity: 1;
    display: block;
}

.header.is-active .header-logo-dark {
    opacity: 1;
    display: block;
}
.header.is-active .header-logo-light {
    opacity: 0;
    display: none;
}

.header.is-active .header-menu-li a {
    color: $darkBlue;

    &::before {
        background: linear-gradient(to right, $mediumGreen, $lightGreen);
    }
}
.header.is-active .header-btn button {
        background: $mediumGreen;
        color: $white;
        transition: 300ms ease-in-out;
        

        &:hover {
            box-shadow: inset 0 0 0 2px $darkBlue;
            color: $darkBlue;
            background: transparent;
        }
}

.header.is-active {
    background: $white;
}

.header-nav {
    padding: 20px 5.5%;
    position: relative;
    justify-content: space-between;
    margin: auto;
}

.header-logo {
    position: relative;

    a img {
        height: 46px;
        
    }
}

.header-menu {
    align-items: center;
}

.header-menu-li {

    a {
        position: relative;
        margin: 0 0.625rem;
        font-weight: 500;
        font-size: $font-sm;
        color: $white;
        transition: color 300ms ease-in-out;

        &::before {
            content: "";
            display: block;
            position: absolute;
            height: 5px;
            background: $white;
            left: 0;
            right: 0;
            bottom: -33px;
            opacity: 0;
            transition: opacity 300ms ease-in-out;
        }

        &:hover {
            opacity: 0.95;

            &::before {
                opacity: 1;
            }
        }
    }
}

.header-btn {
    height: 46px;
    font-size: $font-sm;
    font-weight: 500;
    
    button {
        background: transparent;
        border: 1px solid $white;
        transition: 200ms ease-in-out;
        
        &:hover {
            background: $white;
            color: $darkBlue;
        }
    }
} 

Answer 1

Try this code:

window.addEventListener("scroll", function(){
    var header = document.querySelector(".header");
    header.classList.toggle("is-active", window.scrollY > 0);
})