Module «scroll-nav». Sets «active» class for link to section in viewport.

Демо:

https://codepen.io/ildar-meyker/pen/KKxqYvL

Плагины:

Подключение:

//

Разметка:

//

Стили:

//

Инициализация:

import throttle from "lodash/throttle";

let $sections = null;
let $scrollNav = null;

function handleWindowScroll() {
    console.log(1);
    const middleline = $(window).scrollTop() + $(window).height() / 2;

    const $needle = $sections
        .filter(function () {
            return $(this).offset().top <= middleline;
        })
        .last();

    if ($needle.length) {
        $scrollNav.find(".active").removeClass("active");
        $scrollNav.find(`a[href="#${$needle.attr("id")}"]`).addClass("active");
    }
}

$(function () {
    $sections = $('section[data-rel="scroll-nav"]');

    if ($sections.length === 0) return;

    $scrollNav = $(".js-scroll-nav");

    $(window).on("scroll", throttle(handleWindowScroll, 500));
});