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.

The trend started with sidebars, but where it’s really grown in popularity is headers. Why? Because headers tend to contain navigation, and persistent navigation is popular with users.

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.

Here’s what it’s going to look like when we’re done: