Как добавить класс к ссылке при скрилинге к определённой секции страницы?

Question

[lekseykorolev]

Есть фиксированная шапка с ссылками. Нужно изменить их цвет, когда сайт достигает конкретных секций. Как реализовать добавление класса как например на сайте https://getgems.io/creators.

В теории можно рассчитать от верха страницы, но при адаптиве сайта это работать не будет.

Answer 1

[Олег Николаев]

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

Comments

[lekseykorolev]

Буду благодарен за практический пример. У самого не вышло

[Олег Николаев]

Прости друг, только сейчас зашел снова на qna.habr.
Если я верно понял твою проблему, то я решал ее так:

js:

// получаем элемент до которого скролят и должна менятся шапка
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"); // убираем класс
  }
});

[lekseykorolev]

Олег Николаев, спасибо