Как сделать такой header?

Question

[Toy Boy]

В этом сайте хедер https://www.byrdie.com/
при прокрутке лого уменьшается и смешается на лево. навигация в центре. все это происходит плавно

Comments

[Антон Литвиненко]

плавно только лого уменьшается, остальное резко

[Toy Boy]

есть мыслишки?

Answer 1

[Достон Норпулатов]

window.addEventListener('scroll', fixHeader)
fixHeader();

function fixHeader() {
	let header = document.querySelector('.header');
	if (window.pageYOffset >= 100) {
		header.classList.add('header--fixed');
	} else {
		header.classList.remove('header--fixed');
	}
}

И уже по классу добавляете стили.

Comments

[Toy Boy]

спасибо за код, но я написал такой код через куери. проблема со стилями(((((