// получаем элемент до которого скролят и должна менятся шапка
const CONTACT = document.querySelector(".contact");
// получаем его положение от верха страницы
const POSCONTACT = CONTACT.getBoundingClientRect().top;
// а эта переменная - мой костыль, чтобы при скролле каждого пикселя не выполнялось присвоение класса уже присвоенного
optimiz_scroll_contact = false;
//слушаем событие скролла
window.addEventListener("scroll", function () {
if (POSCONTACT < this.scrollY && !optimiz_scroll_contact) {
// если проскролено больше пикселей, чем расстояние до элемента
optimiz_scroll_contact = true;
CONTACT.classList.add("fixed"); // добавляем класс
}
else if (POSCONTACT > this.scrollY && optimiz_scroll_contact) {
// и наоборот
optimiz_scroll_contact = false;
CONTACT.classList.remove("fixed"); // убираем класс
}
});
Тема простая