Recently, fixed headers on mobile websites have really started to bother me. I want all the screen real estate possible! So I drew some inspiration from iOS apps that hide their top bars when you scroll down, and show them when you scroll up. I worked out a solution using
window.scrollY and some opacity & translate tomfoolery.
Working demo on CodePen.