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.
- Add the
animated-header
class to the header element, for example:
<nav class="nav-default animated-header">
...
</nav>
- 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. - Check the following article for the implementation details and demos: On-Scroll Animated Header