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

Вот «ванильный» JS-код, который просто добавляет дополнительный CSS-класс scrolled, при сдвиге страницы вниз на 50 точек.

<script>
  window.addEventListener('scroll', () => {
    document.querySelector('#header').classList.toggle('scrolled', window.scrollY > 50);
  });
</script>

Такой простой код, а такую важную штуку делает.