Как изменить активную вкладку на панели навигации при прокрутке, пока не станет виден компонент?

Question

У меня есть панель навигации с несколькими вкладками, на которые я могу щелкнуть, и он прокручивает меня до компонента (scrollToComponent), он также устанавливает эту вкладку как активную.

Я также хочу сделать противоположный, прокрутить и когда компонент виден, он должен пометить соответствующую вкладку как активную.

Я нашел эту скрипку , которая демонстрирует именно то, что мне нужно, но использует Jquery элементы, к которым выполняется прокрутка, не являются компонентами, и все они имеют одинаковую высоту.

$(document).ready(function () {
$(document).on("scroll", onScroll);

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#menu-center ul li a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});

Answer 1

Отвечаю себе, так как это может быть полезно для кого-то в будущем:

Я сделал этот пример кода и , используя response-Crossction-Observer .

Он имеет настраиваемый хук, который позволяет узнать, виден ли элемент, тогда вам нужно будет сравнить, какой элемент находится наверху, чтобы вы могли решить, какую вкладку вы хотите установить как активную.