Как на jquery выполнять функцию только когда сайт пролистал до определенного уровня?

Question

[Валерий Миладзе]

$(window).scroll(function() {
    if($(this).scrollTop() > 26)
    {
        $('.navbar').removeClass('navbar-light');
        $('.navbar').addClass('navbar-dark bg-dark2 rounded-0');
    } else {
        $('.navbar').removeClass('navbar-dark bg-dark2 rounded-0');
        $('.navbar').addClass('navbar-light');
    }
});

Есть у меня вот такие строки, которые позволяют заменять css в меню, т.е выполняют функцию когда пролистываю сайт на 26px вниз.
Вопрос:
Как сделать такое же, то по пролистыванию вниз не на px а до блока с определенным id ?

Comments

[Rustam Bainazarov]

Получите положение элемента от верха окна в пикселях:
https://learn.javascript.ru/coordinates
https://www.w3schools.com/jsref/prop_element_offse... — тут короче к делу.

Поместите в переменную. Сравнивайте с переменной вместо 26 пикселей.

Answer 1

[Алексей Ярков]

IntersectionObserver вам поможет

Comments

[Валерий Миладзе]

причем тут вообще IntersectionObserver? Я не с изображениями работаю

[Алексей Ярков]

Валерий Миладзе, ну на такую суровую заявку мне даже ответить нечего. Просто уйду, чтобы не разочаровываться.

Answer 2

[Сергей Хлопов]

Вот тут примеры может как то помогут
Как измерить расстояние элемента от его абсолютного расположения на странице до верха окна?