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

Question

[NotAwizard]

Приветствую!Хочу ,чтобы при прокрутке сайта доходя до очередной секции менялся цвет меню(на шапка хедера,а именно меню).
До этой секунды пока не получилось.А хочется.Спасибо заранее.Знаю,что братство верстальщиков не оставит наедине меня с этой проблемой:))

Comments

[Павел]

по событию scroll меряйте расстояние от верха браузера до нужного блока и сравнивайте его с текущим положением верха браузера, как только цифры сравняются - меняйте цвет меню, и не шапки хедера, а именно меню ;)

[NotAwizard]

Павел, Спасибо конечно...А есть где глянуть как это работает для новичков?))

[alex4answ]

NotAwizard, на learn.javascript.ru
ну или события гуглите

Answer 1

[Владимир Коротенко]

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();
  });
});

Comments

[NotAwizard]

Спасибо.Мне как новичку это не понять без html кода.Сложно одним словом разобраться.Может ест где-то в "наблюдательном " виде?))

[Владимир Коротенко]

NotAwizard, https://jsfiddle.net/vkorotenko/nqwujvr3/

Окно просмотра сократите что бы появилась полоса прокрутки

[NotAwizard]

Владимир Коротенко, color home about остаётся без изменений.orange А мне нужно,чтобы при скроле этот цвет у меню менялся.

Answer 2

[twoone]

Можно отслеживать активные секции с помощью IntersectionObserver. Но нужно помнить, что он работает ожидаемым образом только в том случае, если размеры первой и последней секции превосходят половину вьюпорта, что для реальных проектов практически дефакто. Иначе придется эксперементировать с конфигурацией IntersectionObserver.

Comments

[NotAwizard]

Спасибо.
У меня вот что получилось
https://jsfiddle.net/rotex/9vun4wto/1/

[NotAwizard]

Но текст не удавалось сменить.Сейчас попробую разобраться в твоём.Я новичок ещё в этом деле