A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition. An animated header that will change its size on scroll. Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes. The H
![On-Scroll Animated Header | Codrops](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6ec3bdfb12bfba8861e3a0a78180fae89b1a289/height=288;version=1;width=512/https%3A%2F%2Fcodrops-1f606.kxcdn.com%2Fcodrops%2Fwp-content%2Fuploads%2F2013%2F06%2FBlueprint_FixedAnimatedHeader1.png%3Fx88254)