Create an Animated Sticky Header

There's always a delicate balance between including too much information in your site's header and not providing all of the details a user needs. Further, there's always the question of how to present navigation options as your users scroll down the page. The latter can be solved by a standard sticky header, which stays fixed to the top of a screen. The former can be approached by showing more options upon page load and hiding certain, less important elements upon scroll. These two approaches are ultimately combined in an animated sticky header.

An animated sticky header solves many of the above problems by having two distinct views: (1) the full header which can include your logo, navigation, social links, and a tag line if applicable; and (2) the sticky header which trims all of that down to just the logo and navigation. This helps maintain design integrity as your website loads, and yet preserves needed space while providing essential navigation options as a given user scrolls down the page.

A little use of CSS3 transitions provides the subtle animations that interconnect the two header viewpoints. With some additional responsive styling, you'll have a contemporary animated sticky header. Below is the HTML, CSS, and JavaScript required.

Step 1 - animated-sticky-header.html

Copy and paste the following code into animated-sticky-header.html

Step 2 - animated-sticky-header.css

Download the CSS below and include it in your web page

Step 3 - animated-sticky-header.js

Copy and paste the following code into animated-sticky-header.js

Step 4 - Add the following includes to your web page

In this tutorial Solodev showed you how to add create an animated sticky header. Customize the code to include your site's unique logo, color scheme, and navigation items. Enjoy!