Animated Sticky Header On Scroll with CSS3 and Javascript

In this tutorial we're going to create a position fixed header that will changes its size on scroll. The idea is to decrease header's size and the inner elements will adjust their font-size/line height while a certain amount of the page gets scrolled.

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

How to use it:

1. Create the header

<div class="cbp-af-header">
<div class="cbp-af-inner">
<h1>Headline</h1>
<nav> 
<a href="#">Nav 1</a> 
<a href="#">Nav 2</a> 
<a href="#">Nav 3</a>
</nav>
</div>
</div>

2. The CSS

.cbp-af-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 10000;
height: 230px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
.cbp-af-header .cbp-af-inner {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 0 1.875em;
}
.cbp-af-header h1, .cbp-af-header nav {
display: inline-block;
position: relative;
}
/* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
.cbp-af-header h1, .cbp-af-header nav a {
line-height: 230px;
}
.cbp-af-header h1 {
text-transform: uppercase;
color: #333;
letter-spacing: 4px;
font-size: 4em;
margin: 0;
float: left;
}
.cbp-af-header nav {
float: right;
}
.cbp-af-header nav a {
color: #aaa;
font-weight: 700;
margin: 0 0 0 20px;
font-size: 1.4em;
}
.cbp-af-header nav a:hover {
color: #333;
}
/* Transitions and class for reduced height */
.cbp-af-header h1, .cbp-af-header nav a {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.cbp-af-header.cbp-af-header-shrink {
height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1, .cbp-af-header.cbp-af-header-shrink nav a {
line-height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1 {
font-size: 2em;
}

/* Example Media Queries */
@media screen and (max-width: 55em) {
.cbp-af-header .cbp-af-inner {
width: 100%;
}
.cbp-af-header h1,  .cbp-af-header nav {
display: block;
margin: 0 auto;
text-align: center;
float: none;
}
.cbp-af-header h1,  .cbp-af-header nav a {
line-height: 115px;
}
.cbp-af-header nav a {
margin: 0 10px;
}
.cbp-af-header.cbp-af-header-shrink h1,  .cbp-af-header.cbp-af-header-shrink nav a {
line-height: 45px;
}
.cbp-af-header.cbp-af-header-shrink h1 {
font-size: 2em;
}
.cbp-af-header.cbp-af-header-shrink nav a {
font-size: 1em;
}
}
 @media screen and (max-width: 32.25em) {
.cbp-af-header nav a {
font-size: 1em;
}
}
 @media screen and (max-width: 24em) {
.cbp-af-header nav a,  .cbp-af-header.cbp-af-header-shrink nav a {
line-height: 1;
}
}

3. The javascript

var cbpAnimatedHeader = (function() {
 
    var docElem = document.documentElement,
        header = document.querySelector( '.cbp-af-header' ),
        didScroll = false,
        changeHeaderOn = 300;
 
    function init() {
        window.addEventListener( 'scroll', function( event ) {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( scrollPage, 250 );
            }
        }, false );
    }
 
    function scrollPage() {
        var sy = scrollY();
        if ( sy >= changeHeaderOn ) {
            classie.add( header, 'cbp-af-header-shrink' );
        }
        else {
            classie.remove( header, 'cbp-af-header-shrink' );
        }
        didScroll = false;
    }
 
    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }
 
    init();
 
})();

---

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