Как реализовать такую шапку на чистом js?

Question

[Кирилл]

На этом сайте есть шапка которая уменьшается при скролле на сайте. Как такое реализовать на чистом js?

Answer 1

[betterthanyouthink]

const header = document.querySelector(".header");
window.addEventListener("scroll", function(){
	window.pageYOffset > 100 ? header.classList.add('sticky') : header.classList.remove('sticky')
});

C помощью класса sticky стилизуете шапку как вам нужно. Условно

.header { height: 100px;} 
.header.sticky {height: 50px}

Для плавности не забывайте добавить transition.

Comments

[Алексей Дубровин]

Добавлю что без js это реализовывается ещё проще.
sticky, это ещё и плавнее выйдет без знания js

[Сергей]

Эту часть

window.pageYOffset > 100 ? header.classList.add('sticky') : header.classList.remove('sticky')

можно сократить до

header.classList.toggle('sticky', window.pageYOffset > 100);