betterthanyouthink

1) Выбираете элемент на который у вас задан :hover, жмете :hov:

2) Выбираете псевдоэлемент в разметке и жмете computed:

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.

можешь попробовать накинуть backdrop-filter на шапку
e.g. backdrop-filter: blur(10px);

Это решит проблему "смешивания", но смотрите поддержку
https://caniuse.com/css-backdrop-filter