Create an Animated Sticky Header


An animated sticky header preserves needed space while providing essential navigation options as a user scrolls down the page.

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

 animated-sticky-header.css

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!

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.