[caption id="" align=“alignnone” width=“464.0”]![ 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 requestAnimationFrame , window.scrollY and some opacity & translate tomfoolery.

Working demo on CodePen. ](http://static1.squarespace.com/static/554569a4e4b0b68214c1f5d9/55457b34e4b0fca745eb358d/55457b35e4b0fca745eb368b/1430616928723//img.gif) 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 requestAnimationFrame , window.scrollY and some opacity & translate tomfoolery.

Working demo on CodePen. [/caption]