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 >
        <div >

            <figure >
                <a href="#">
                    <img  src="images/logoWhite.png" alt="San Miguel Services Logo">
                    <img  src="images/logoDark.png" alt="San Miguel Services Logo">
                </a>
            </figure>

            <nav >
                <div >
                    <a href="">WELCOME</a>
                    <a href="">SERVICES</a>
                    <a href="">ABOUT</a>
                    <a href="">PORTFOLIO</a>
                    <a href="">CONTACT</a>
                </div>
            </nav>

            <div >
                <button href="#" >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;
        }
    }
} 

CodePudding user response：

Try this code:

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

CodePudding user response：

Try to use more semantic HTML, this will help you in building the site.

<div >
<ul>
  <li><a href="#home">Home</a></li>
</ul>               
</div> 

<section id="home">
  <div >

  </div>
</section>

You can also add some initial CSS settings to help you build your site, like :root, * {}, etc... If you still don't know what a :root is, look it up, this will make it a lot easier. I left some example code.

/* GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

:root {
    font-size: 62.5%; /* 1rem = 10px */
}

html {
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: " ";
    font-size: 1.6rem;
    text-align: center;
    overflow: overlay;
    background-color: var(--name-var);
}

.wrapper {
    width: min(50rem, 100%);
    margin-inline: auto;
    padding-inline: 2.4rem;
}

window.addEventListener('scroll', onScroll)

onScroll()
function onScroll() {
    showNavOnScroll ();
    showBackToTopButtonOnScroll();
    activateMenuAtCurrentSection(home);
}
function activateMenuAtCurrentSection(section) {
    const targetLine = scrollY   innerHeight / 2

    // check if the section has passed the line 
     // what data will I need?
    const sectionTop = section.offsetTop
    const sectionHeight = section.offsetHeight
    const sectionTopReachOrPassedTargetLine = targetLine >= sectionTop

    // check if the base is below the target line
     // what data will I need?
    const sectionEndAst = sectionTop   sectionHeight

    const sectionEndPassedTargetLine = sectionEndAst <= targetLine

    console.log('Did the session bottom go over the line?', sectionEndPassedTargetLine)


    // section boundaries
    const sectionBoundaries =
    sectionTopReachOrPassedTargetLine && !sectionEndPassedTargetLine

    const sectionId = section.getAttribute('id')
    const menuElement = document.querySelector(`.menu a[href*=${sectionId}]`)


    menuElement.classList.remove('active')
    if (sectionBoundaries) {
        menuElement.classList.add('active')
    }


}

// This is so that when you scroll down your navigation bar goes out
function showNavOnScroll() {
    if (scrollY > 0) {
        navigation.classList.add('scroll');
    } else {
        navigation.classList.remove('scroll');
    }
}


// Will make them appear smooth
ScrollReveal({
    origin:'top',
    distance: '30px',
    duration: 700,
}).reveal(`
    #home`);