1. Listen to the page scroll event with JavaScript
2. To know how many pixel the page scrolled down, you can look at this attribute document.documentElement.scrollTop
3. When it scrolled enough to your liking, then you can add a class to your header element with a CSS transform example: myHeader.classList.add('scaledown')
Here
with the steps
and a
demo