Узнать какой блок сейчас в области видимости экрана?

Question

[Сергей]

Добрый день, как можно сделать что-бы при скролле над секцией, соответствующий ей элемент в меню получал класс (напр. active)
Я так понимаю можно секции и элементу меню задать один класс, и при скролле сверять эти классы, но я не могу понять как отследить какой элемент сейчас находится в области видимости экрана...подскажите плиз)

Answer 1

[Сергей]

Вдруг кому пригодится, как добавлять класс пункту меню соответствующему блоку в котором находится пользователь

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

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

Демо https://codepen.io/ifeltblankk/pen/AXNbxE

Answer 2

[sergski]

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