@NotAwizard

Как сделать чтобы при скроле менялся цвет меню?

Приветствую!Хочу ,чтобы при прокрутке сайта доходя до очередной секции менялся цвет меню(на шапка хедера,а именно меню).
До этой секунды пока не получилось.А хочется.Спасибо заранее.Знаю,что братство верстальщиков не оставит наедине меня с этой проблемой:))
  • Вопрос задан
  • 503 просмотра
Пригласить эксперта
Ответы на вопрос 3
firedragon
@firedragon
Senior .NET developer
const ready = (callback: { (): void; (): void }) => {
  if (document.readyState !== 'loading') {
    callback();
  } else {
    document.addEventListener('DOMContentLoaded', callback);
  }
};

ready(() => {
  window.addEventListener('scroll', (e: Event) => {
    const top = document.documentElement.scrollTop;
    const pos = (top / 3).toFixed(2);
    const splash = document.querySelector('.splash') as HTMLDivElement;
    if (splash !== null) {
      splash.style.backgroundPosition = '0px -' + pos + 'px';
    }

    const homeNavbar = document.querySelector(
      '#home > .navbar',
    ) as HTMLDivElement;
    if (top > 50) {
      homeNavbar.classList.remove('is-transparent');
    } else {
      homeNavbar.classList.add('is-transparent');
    }
  });
  const abar = document.querySelector('a[href="/#"]') as HTMLAnchorElement;
  abar.addEventListener('click', (e: any) => {
    e.preventDefault();
  });
});
Ответ написан
@twoone
Можно отслеживать активные секции с помощью IntersectionObserver. Но нужно помнить, что он работает ожидаемым образом только в том случае, если размеры первой и последней секции превосходят половину вьюпорта, что для реальных проектов практически дефакто. Иначе придется эксперементировать с конфигурацией IntersectionObserver.

Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Если я правильно понял, то можно вот так:

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы