animated-header.js

A fixed header that will animate its size on scroll.

This is a modification of the Codrops' version. It use the jQuery instead of the deprecated classes.js.

Usage

1. Add the animated-header class to the header element, for example:

  <nav class="nav-default animated-header">
   ...
  </nav>

2. When the user scroll down the header, the header element will be added with the class animated-header-scroll. Therefore, you could use CSS to style the scrolled header.
3. Check the following article for the implementation details and demos: On-Scroll Animated Header