Im trying to write the cleanest code to change a dot colour on a vertical dot navigation element. Basically, when the user scrolls to the next section, the class should be removed on the old circle, and added to the new one.

This is what happens when the user clicks the button  (the code is wrapped inside a click function).

1. //Change dot class
2. circle_curr = '#' + curr_pos.toLowerCase() + '_circle';
3. circle_target = target + '_circle';
4. $(circle_curr).removeClass("current");
5. $(circle_target).addClass("current");

However I would like to update the classes on scroll as well. I have tried using the link here, but cant relate it to my code.

https://stackoverflow.com/questions/18430874/dots-change-on-scroll

Heres what I have so far:

1.     $(window).on('scroll', function(e) {
2.         var elems    = $('#home, #about, #crafts, #contact'),
3.             scrolled = $(this).scrollTop();
4.         
5.         var dataPage = elems.filter(function() {
6.             return $(this).offset().top + ($(this).height() / 2) >= scrolled;
7.         }).first();
8. 
   
9.         console.log(dataPage);
10.         var section = '#' + dataPage.attr('id') + "_circle";
11.         console.log(section);
12.         $(section).addClass("current");
13.         $(section).removeClass("current");
14. 
    
15.     }).trigger('scroll');

And heres my HTML:

<nav class="hidden"> <ul> <li> <a href="#home"> <div class="current circle" id="home_circle"> </div> <span> Home </span> </a> </li> <li> <a href="#about"> <div class="circle" id="about_circle"> </div> <span> About </span> </a> </li> <li> <a href="#crafts"> <div class="circle" id="crafts_circle"> </div> <span> Crafts </span> </a> </li> <li> <a href="#contact"> <div class="circle" id="contact_circle"> </div> <span> Contact </span> </a> </li> </ul> </nav>

Many thanks in advance.