On-Scroll Animated Header

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

Blueprint_FixedAnimatedHeader

View demo Download source

An animated header that will change its size on scroll. Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.

The HTML

<div class="cbp-af-header">
	<div class="cbp-af-inner">
		<h1>Fixed</h1>
		<nav>
			<a href="#">Broccoli</a>
			<a href="#">Almonds</a>
			<a href="#">Pears</a>
			<a href="#">Oranges</a>
		</nav>
	</div>
</div>

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;
	}
}

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();

})();

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 63

  1. 1

    Worked Perfectly! I was using Bootstrap, but I found it a little difficult to incorporate with Bootstraps styles. So instead I used all the code provided instead of the Bootstrap nav code.

    Was easy enough to make edits to.

    Thanks Mary Lou!

  2. 2

    Added the JS and CSS to files and linked them to my HTML but for some reason the js wont run..? the nav doesnt shrink when i scroll.

  3. 3

    This is fantastic!

    However I’m finding that the function that triggers the shrink animation upon scrolling down the page doesn’t activate in mobile browsers (I tested in chrome on ios) until the smooth scrolling animation of the browser decelerates and stops completely.

    Its possible to scroll from the top of a page to the bottom without the shrink animation being triggered. Anyone know a workaround for this?

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>