How to create an animated sticky header, with CSS3 and jQuery

Trends come and trends go. The ones that stick around the longest do so because they solve a particular problem. A trend that’s popular right now for that very reason, is sticky elements; elements that behave normally until we scroll, and then maintain their presence on the page somehow.In this tutorial we’ll create a header that sticks to the top of the viewport, but so that it doesn’t interfere with the content, we’re going to minimize it when the user scrolls down the page.