Смена активного пункта меню при скролле

    <header class="sticky-header">
        <nav class="top-menu">
            <ul>
                <li><a class="active" href="#home">Главная</a></li>
                <li><a href="#about">О нас</a></li>
                <li><a href="#service">Услуги</a></li>
                <li><a href="#contact">Контакты</a></li>
            </ul>
        </nav>
    </header>
<section id="home">
    Здесь любой контент...
</section>
<section id="about">
    Здесь любой контент...
</section>
<section id="service">
    Здесь любой контент...
</section>
<section id="contact">
    Здесь любой контент... 
</section>

jQuery

var menu_selector = ".top-menu"; // Переменная должна содержать название класса или идентификатора, обертки нашего меню. 
function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
}
$(document).ready(function () {
    $(document).on("scroll", onScroll);
    $("a[href^=#]").click(function(e){
        e.preventDefault();
        $(document).off("scroll");
        $(menu_selector + " a.active").removeClass("active");
        $(this).addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);
        $("html, body").animate({
            scrollTop: target.offset().top
        }, 500, function(){
            window.location.hash = hash;
            $(document).on("scroll", onScroll);
        });
    });
});

И затем просто его проинициализируйте.

$(document).ready(function(){
    $(".top-menu").changeActiveNav();
});

Рабочий пример: https://codepen.io/praim/pen/NMgdLb