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);