<!DOCTYPE html><style>
.header{
height: 80px;
background: red;
transition: all 0.3s;
position: fixed;
left: 0;
right: 0;
}
.header.compact{
height: 40px;
background: blue;
}
</style>
<header class="header" id="header">
</header>
<main style="height:800px"></main>
<script>
var header = document.getElementById('header');
var scrolled = false;
window.onscroll = function(e) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 10) {
if (!scrolled) {
header.className += ' compact';
scrolled = true;
}
} else {
if (scrolled) {
header.className = header.className.replace('compact', '');
scrolled = false;
}
}
};
</script>