Изменение внешнего вида шапки сайта (добавлением css класса) при прокрутке до определенного блока. Как сделать?

Question

[aliasst]

На сайте есть фиксированная шапка, нужно чтобы при скролле при достижения определенной секции.. к шапке добавлялся определенный класс CSS.. А вне этой секции класс удалялся.
Есть скрипт который делает такое в зависимости от того до какой высоту прокрутили в пикселях.
Вот он:

var scrolled;
window.onscroll = function() {
    scrolled = window.pageYOffset || document.documentElement.scrollTop;
    if(scrolled > 400){
        $(".header").addClass("dis");
    }
    if(400 > scrolled){
        $(".header").removeClass("dis");       
    }
}

А как сделать чтобы класс добаылялся только если шапка находится в пределах какой-то секции?

Comments

[Антон]

Вычислить смещение секции и ее высоту, условием проверять, если высота достигнута и текущая позиция скролла меньше, чем координаты смещения блока + его высота, то добавлять, елсе удалять

Answer 1

[Дмитрий]

//Вот так можно вывести количество прокрученных пикселей до блока
const el = document.querySelector('.target')
console.log(el.scrollTop)
//Вот так можно вывести высоту блока в пикселях
console.log(el.clientHeight)

Документация: scrollTop и clientHeight

Если вешаете что-то на скролл, то посмотрите ещё что-такое debounce и throttling.