Анимация "Header"

Question

Здравствуйте нужна помощь - как можно сделать такую анимацию хедера как в ссылке: https://galleryhotel.ru/magazine/halaty-dlya-gostinic-i-oteley при скроле вниз она уменьшается.

ДО:

ПОСЛЕ:

ЗАРАНЬЕ СПАСИБО :)

Answer 1

Просто применить класс со стилями при достижении какой-то позиции скролла:

addEventListener('scroll', (e) => {
  let header = document.getElementsByTagName("header")[0];
  if (window.pageYOffset > 200) {
    header.classList.add("headerMini");
  } else {
    header.classList.remove("headerMini");
  }
});

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 5000px;
}

header {
  position: fixed;
  top: 0;
  box-shadow: 0 0 10px #000;
  padding: 50px;
  font-family: sans-serif;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20pt;
  transition: 0.2s ease;
}

.logo {
  width: 60px;
  height: 60px;
  background: magenta;
  margin-right: 20px;
  transition: 0.2s ease;
}

.headerMini {
  font-size: 16pt;
  padding: 20px;
}

.headerMini .logo {
  width: 40px;
  height: 40px;
}

<div class="wrapper">
  <header>
    <div class="logo"></div>
    <div class="text">Какой-то сайт</div>
  </header>
</div>

БЛОГ НА HUSL

Анимация "Header"

Ответы (1 шт):