inactivating nav items while scrolling to all the divs or sections not specified in nav items with JS

0
votes

i have already done the part of "highlighting nav menu on scroll with JS". so it's actually working properly. the only problem i have is that i just wanna know "how can i de-highlight nav items for all the divs or sections not specified in my nav items while scrolling to them?" or better to say "how can i remove the class="active" from all the sections or divs not specified in my nav items while reaching to those sections by scrolling?"

click on the link below to see my code:

https://jsfiddle.net/fdtw58jh/70/

if you pay attention to my codes, you will realize that when you scroll down to the div element, item2 (in my navigation part) is still active while it must get inactive until we reach to item3. so no items in my navigation must be active while the user scrolls down to the specified div element. can you help me out?

1
javascripthtmljquerycss

1 Answers

1
votes

your script just "controls" section-elements

either you change

<div id="DifferentOne" ...

to use a section element

<section id="DifferentOne" ...

and will instantly work (no nav element hightlighted when on that section)

OR

you need to change your selector in the script to also work for div-elements

const sections = document.querySelectorAll('section, div');