asked on

Highlight menu item on scroll

Need help here ....
I am having difficulty here .... onClick the below code highlights my menu item as it should but
this is with the click event
I need to do the same thing but onScroll I need to highlight the menu item as I am doing below ... I guess using the active class

1. When user scrolls to next section the menu item should be highlighted - using the active class

  let actLink = document.querySelector("#homeLink");
actLink.classList.add("active"); // Add .active class to Home main Landing Page
// onclick remove and or add .active
function activeFunction(e) {
   let els = document.querySelector(".active");
   if (els !== null) {
      els.classList.remove("active");
   }
   e.target.className = "active";
}

Open in new window

Mark Bran

ASKER

Thought I would add the HTML sections

<section id='home'></section>
<section id='about'></section>
<section id='team'></section>
<section id='contact'></section>

Open in new window

leakim971

please provide a link to your page

leakim971

test page : http://leak.im/29178037/

        let homePosY = document.querySelector("#home").offsetTop;
        let aboutPosY = document.querySelector("#about").offsetTop;
        let teamPosY = document.querySelector("#team").offsetTop;
        let contactPosY = document.querySelector("#contact").offsetTop;
        let curActive = document.querySelector(".active");
        if(curActive) {
            curActive.classList.remove("active");
        }
        if(window.scrollY>=(homePosY-8)&&window.scrollY<aboutPosY) {
            document.getElementById("homeLink").className = "active";
        } else if(window.scrollY>=aboutPosY&&window.scrollY<teamPosY) {
            document.getElementById("aboutLink").className = "active";
        } else if(window.scrollY>=teamPosY&&window.scrollY<contactPosY) {
            document.getElementById("teamLink").className = "active";
        } else if(window.scrollY>=contactPosY) {
            document.getElementById("contactLink").className = "active";
        }
    });
    window.dispatchEvent(new Event("scroll"));

Open in new window

With :

<div class="stick" id="menus">
    <span><a href="#home" id="homeLink">Home</a></span>
    <span><a href="#about" id="aboutLink">About</a></span>
    <span><a href="#team" id="teamLink">Team</a></span>
    <span><a href="#contact" id="contactLink">Contact</a></span>
</div>
<section id='home'>
    <div style="height:1300px;background-color: #0c60b3;"></div>
</section>
<section id='about'>
    <div style="height:1300px;background-color: rosybrown;"></div>
</section>
<section id='team'>
    <div style="height:1300px;background-color: yellowgreen"></div>
</section>
<section id='contact'>
    <div style="height:1300px;background-color: darkgoldenrod"></div>
</section>

Open in new window

Mark Bran

ASKER

at bo9ttom of JS code getting an error ... red squigly here ---> }); at line 18:

Mark Bran

ASKER

Here is my codepen I am working on
https://codepen.io/jsMarko/pen/eYNXyoZ

ASKER CERTIFIED SOLUTION

leakim971

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer