Как менять цвет header при прокрутке?

Question

[Bartf]

Есть сайт с множеством секций. Нужно, чтобы над первой секцией, он фона не имел, а над всеми остальными фон был белым. Высота первого блока 100vh.

Answer 1

[Дуболом Одноклеточный]

$(window).on("scroll", function() {
  $(селектор header).toggleClass("active", $(this).scrollTop() > $(window).height());
});

Тут, шапка будет меняться, если пользователь прокрутил больше чем на 100vh ($(window).height() - это 100vh)

Изменено: Только класс active ты должен написать в css (написать какие стили header будут изменяться)

Comments

[Bartf]

Uncaught TypeError: this.scrollTop is not a function

[Дуболом Одноклеточный]

Bartf, Я поправил в ответе

Answer 2

[Ваня Зюзгин]

Вот код на JS, без jQuery:

window.addEventListener('scroll', function() {
  if (pageYOffset > 50) {
    document.querySelector('.header').classList.add('active')
  } else {
    document.querySelector('.header').classList.remove('active')
  }
})

Comments

[Pavlenko_Pigmalion]

Спасибо за ответ, сработало!
Делал в реакте. Только посоветую тем, кто будет это делать, к pageYOffset добавлять window, что бы было window.pageYOffset, и можно переименовывать класc active, если есть необходимость.
Вообще давно было интересно узнать, как это делается, спасибо)