Simple Fixed Header on Srolling

With all the website project I've been working, I already seen something in common. One of those thing is a header. So, here is the 2 header with simple fixed header on scrolling.

1. Header Hide

This header is hide when we scroll the page to bottom by 50px from top, but when you scrolling up, it will shown. I like the header, since we can see all the page without disturbed by header menu, But, some time I miss the header. lol :D

Here is the code :

See the Pen Scrolling Header #1 by hari (@zenasen) on CodePen.

2. Header Shrink

This header is shrink or more tight when we scroll the page to bottom by 50px, but when you scrolling up till you reach the top, the header will grow larger. 

Here is the code :

See the Pen Scrolling Header #2 by hari (@zenasen) on CodePen.