Как сделать появление фона у header при прокрутке вниз на js?

Question

[Александр Тихонович]

Нужно чтобы при прокрутке на 54px вниз начинал появляться фон у header и начинал исчезать при возврате к 54px сверху.

Вот, что-то похожее на то, что мне надо: jsfiddle.net/9o8ky9kw/1

Comments

[VolgaVolga]

А причем здесь Node.js, если речь о браузерном поведении?

[Александр Тихонович]

Н@VolgaVolga, не понял Ваш ответ.

[VolgaVolga]

alexander_tihonovich, в браузере есть Node.js?

[Александр Тихонович]

VolgaVolga, это среда, в которой пишется приложение

[VolgaVolga]

alexander_tihonovich, неверно. Это среда исполнения JavaScript.
А конкретнее: стандартные библиотеки и веб-сервер в обертке над интерпретатором V8.
В браузере никакой Node.js нет и быть не может.

Answer 1

[LJ322]

Если прямо в лоб решать:

const header = document.querySelector('.header'); // Здесь класс вашей шапки
window.addEventListener('scroll', function() {
  if (window.scrollY >= 54) {
    header.classList.addClass('header--scrolling'); // Добавить класс, который будет менять стили
  } else {
    header.classList.removeClass('header--scrolling'); // Убрать
  }
});