Cool Sticky Header Effects with jQuery and CSS3

In this article written by MARY LOU we're going to create various scroll effects for headers using CSS3 and jQuery waypoints plugin. The idea is to create an animated header which could be rotated in 3D or enlarged when scrolling down the web page, please check the demo page before moving on.

Related plugins:

• Sticky Top Menu Bar with CSS3
• Fixed Position Top Menu Bar with jQuery and CSS3 - nagging-menu
• Super Tiny jQuery Sticky Navigation Menu Plugin
• Animated Sticky Header On Scroll with CSS3 and Javascript
• jQuery Sticky Navigation Bar For One Page Website - SMINT
• jQuery Mailchimp-Like Animated Sticky Menu Plugin - StickyChimp

How to use it:

1. Create the html for the header that will be animated by adding the respective state class to it

<header id="ha-header" class="ha-header ha-header-large">
<div class="ha-header-perspective">
<div class="ha-header-front">
<h1> ... </h1>
<nav> ... </nav>
</div>
<div class="ha-header-bottom">
<nav> ... </nav>
</div>
</div>
</header>

2. Create the html for the sections with triggers

<section class="ha-waypoint" data-animate-down="ha-header-small" data-animate-up="ha-header-large">
...
</section>

3. Include component.css on the page, you can add, remove, or edit this CSS file to customize your own header effects

<link rel="stylesheet" type="text/css" href="css/component.css" />

4. Include jQuery library and jQuery waypoints plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/waypoints.min.js"></script> 

5. The javascript

<script>
var $head = $( '#ha-header' );
$( '.ha-waypoint' ).each( function(i) {
var $el = $( this ),
animClassDown = $el.data( 'animateDown' ),
animClassUp = $el.data( 'animateUp' );

$el.waypoint( function( direction ) {
if( direction === 'down' && animClassDown ) {
$head.attr('class', 'ha-header ' + animClassDown);
}
else if( direction === 'up' && animClassUp ){
$head.attr('class', 'ha-header ' + animClassUp);
}
}, { offset: '100%' } );
} );
</script>

---

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.