Как сделать плавность опускания хедера?

Для создания плавного опускания хедера в CSS, можно использовать анимацию и переходы. Вот несколько шагов, которые помогут реализовать данную анимацию:

1. Создайте контейнер для хедера. Например, можно использовать <header> или <div> с определенным идентификатором или классом.

<header class="header-container">
  <!-- Ваше содержимое хедера -->
</header>

2. Добавьте стили для контейнера хедера. Установите значение свойства position в fixed для удобства работы с анимацией.

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #fff;
  transition: top 0.3s ease; /* Добавляем переход для свойства top */
}

3. Определите стили для плавного опускания. Добавьте новый класс или измените существующий класс для контейнера хедера. Установите значение свойства top равным отрицательному значению высоты контейнера, чтобы полностью скрыть хедер за пределы видимой области.

.header-container.hidden {
  top: -100px; /* Пример высоты контейнера хедера */
}

4. Добавьте скрипт для изменения классов контейнера хедера. Например, можно использовать JavaScript для обработки событий прокрутки страницы и изменения класса контейнера в зависимости от положения скролла.

window.addEventListener('scroll', function() {
  var headerContainer = document.querySelector('.header-container');
  var scrollPosition = window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop || 0;

  if (scrollPosition > 100) { /* Пороговое значение для начала анимации */
    headerContainer.classList.add('hidden');
  } else {
    headerContainer.classList.remove('hidden');
  }
});

После выполнения этих шагов, при прокрутке страницы вниз, хедер будет плавно опускаться за пределы видимой области. С помощью анимации и переходов, исчезновение хедера будет выглядеть плавно и эстетично.