Adding a class with JavaScript using scrollPos not showing properly

Question

I'm trying to add a bottom border to appear under the tabs on a navigation bar depending on where you are on the webpage, but when I test to see if my code works, the CSS doesn't get applied. When I check in chrome's dev tools, the class gets added to the elements properly, the border just doesn't appear visually. I've just starting to learn JavaScript so I can't figure out why exactly this isn't working.

I did this following this YouTube tutorial https://www.youtube.com/watch?v=3-2Pj5hxwrw, my code matches his exactly except for a couple notes.

I've played with the required scroll position since my screen is bigger than the one he was using, but it still has the same issue of it adding the class correctly, but the CSS not being applied at all. All related code is under here and any insight would be appreciated!

HTML:

</div>
        <ul class="navbar_menu">
          <li class="navbar_item">
            <a href="#home" class="navbar_links" id="home-page">Home</a>
          </li>
          <li class="navbar_item">
            <a href="#about" class="navbar_links" id="about-page">About</a>
          </li>
          <li class="navbar_item">
            <a href="#services" class="navbar_links" id="services-page"
              >Services</a
            >
          </li>
          <li class="navbar_btn">
            <a href="#sign-up" class="button" id="signup">Sign Up</a>
          </li>
        </ul>
      </div>

CSS:

.highlight {
    border-bottom: 4px solid rgb(132,0,255);
}

JavaScript:

const highlightMenu = () => {
    const elem = document.querySelector('.highlight');
    const homeMenu = document.querySelector('#home-page');
    const aboutMenu = document.querySelector('#about-page');
    const servicesMenu = document.querySelector('#services-page');
    let scrollPos = window.scrollY;

    if(window.innerWidth > 960 && scrollPos < 600) {
        homeMenu.classList.add('highLight');
        aboutMenu.classList.remove('highLight');
        return;
    } else if (window.innerWidth > 960 && scrollPos < 1400) {
        aboutMenu.classList.add('highLight');
        homeMenu.classList.remove('highLight');
        servicesMenu.classList.remove('highLight');
        return;
    } else if (window.innerWidth > 960 && scrollPos < 2345) {
        servicesMenu.classList.add('highLight');
        aboutMenu.classList.remove('highLight');
        return;
    }

    if((elem && window.innerWidth < 960 && scrollPos < 600) || elem) {
        elem.classList.remove('highLight');
    }
}

window.addEventListener('scroll', highlightMenu);
window.addEventListener('click', highlightMenu);

Answer 1

Just needed to close your anonymous function, in this cases I advice you to use JS validator, so you won't waste time for these kind of mistakes.

const highlightMenu = () => {
    const elem = document.querySelector('.highlight');
    const homeMenu = document.querySelector('#home-page');
const aboutMenu = document.querySelector('#about-page');
const servicesMenu = document.querySelector('#services-page');
let scrollPos = window.scrollY;

if(window.innerWidth > 960 && scrollPos < 600) {
    homeMenu.classList.add('highLight');
    aboutMenu.classList.remove('highLight');
    return;
} else if (window.innerWidth > 960 && scrollPos < 1400) {
    aboutMenu.classList.add('highLight');
    homeMenu.classList.remove('highLight');
    servicesMenu.classList.remove('highLight');
    return;
} else if (window.innerWidth > 960 && scrollPos < 2345) {
    servicesMenu.classList.add('highLight');
    aboutMenu.classList.remove('highLight');
    return;
}

if((elem && window.innerWidth < 960 && scrollPos < 600) || elem) {
    elem.classList.remove('highLight');
}
}