Animated Sticky Header On Scroll with CSS3 and Javascript
File Size: | 26.1 KB |
---|---|
Views Total: | 82942 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.