How to highlight right side dot bar on page scroll?

Question

Please check this page: https://shibbir.dev/navigate-master/

Here you can see the dot circle on the right side. If you click on the dot circle, it will go to the corresponding section and highlight the dot circle. for e.g: If you click on the 2nd dot circle it will go to the About section and will highlight the 2nd dot circle.

Now, my question is how can I highlight the corresponding dot circle if I scroll the page?

My Current HTML

<div class="navigate-master">
    <ul>
        <li><a href="#home" class="">&nbsp;</a></li>
        <li><a href="#about" class="active">&nbsp;</a></li>
        <li><a href="#services" class="">&nbsp;</a></li>
        <li><a href="#contact" class="">&nbsp;</a></li>
    </ul>
</div>

and the JS is:

(function ($) {

    $(".navigate-master ul li a").on("click", function () {
        var el = $(this);
        $(".navigate-master ul li a").removeClass("active");
        $(this).addClass("active");
    })

})(jQuery);

Answer 1

Here is a similar question with a good answer to point you in the right direction.

Thinking through this at a high level what you need to do is:

• get the scrollTop position of each of the elements that represent the dots
• have an onscroll handler that checks which of the element's scroll top position is the greatest && <= the current scroll position (one solution, see the similar question for a different approach)
• then apply the active class to this HTML element and style accordingly

Hope this helps!