Здравствуйте нужна помощь - как можно сделать такую анимацию хедера как в ссылке: https://galleryhotel.ru/magazine/halaty-dlya-gostinic-i-oteley при скроле вниз она уменьшается.
ПОСЛЕ:
ЗАРАНЬЕ СПАСИБО :)
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЗдравствуйте нужна помощь - как можно сделать такую анимацию хедера как в ссылке: https://galleryhotel.ru/magazine/halaty-dlya-gostinic-i-oteley при скроле вниз она уменьшается.
ПОСЛЕ:
ЗАРАНЬЕ СПАСИБО :)
Просто применить класс со стилями при достижении какой-то позиции скролла:
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>