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:

ML 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://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 69

Comments are closed.
  1. 1

    Can I use this on WordPress? I mean, only the header. Any ideas how I can implement that?

    • 2

      Yes Marcellius. You can edit any templates on WordPress and developing this example. You need only integrate this to WordPress template. It’s not so very complex.

    • 4

      Abdulrehman, you need a HTML, CSS, JS minimum skills for this. It’s so simple.

      Basicly, you need to substitute the “FIXED” text on top ( tag), for a logo (probably a image). Put image of you logo inside of this tag, this is solve your problem.

  2. 6

    What’s the function of the following?

    ? didScroll = false,
    ? if( !didScroll ) {
    didScroll = true;

    THANKS

    • 7

      The function you are asking about is what the event listener tied to the scroll event triggers. Setting the variable didScroll to false initially means it will the logic will occur first time some one scrolls. The function then sets didScroll to true then triggers the scrollPage function in 250ms. The scrollPage function sets didScroll to false as part of its execution.

      This is done so scrollPage is not repeatedly called during the scrolling action(only every 250ms).

  3. 9

    Hi ,

    I’ve seen a couple of comments in regard to this but nothing has really answered it. I need a logo (image) in place of the word FIXED. I can obviously just insert an image in place of this text, but it doesn’t resize. Is there a way do doing this please.

    Can this also be done for where the navigation text is, as I want to add some images for the nav too. This needs to resize as well.

    Any help much appreciated. Thanks

    • 10

      Copy the code in: cbpAnimatedHeader.min.js

      and rename the elements you want to effect like so.

      var cbpAnimatedHeaderLogo=(function(){var b=document.documentElement,g=document.querySelector(".cbp-af-header-logo"),e=false,a=40;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cbp-af-header-shrink-logo")}else{classie.remove(g,"cbp-af-header-shrink-logo")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();

  4. 11

    Hey, great header!! 🙂

    I have a problem though, I have this large space between the animated header and the content on the page, how do I fix that?

    Thanks again.

  5. 12

    THANKS A ZILLION TIME, I’ve learned a lot will implementing it in a WP test theme 🙂
    Keep up your ninja code going on 🙂

  6. 13

    everything is ok but tell me where to paste the java script >
    var cbpAnimatedHeader = (function() {

    var docElem = document.documentElement,
    header = document.querySelector( ‘.cbp-af-header’ ),………………..

  7. 14

    hi guys, has someone found a solution on how to resize a header image? i am not sure how to “call” the code from above from within the html -can someone help?

    cheers J

    • 15

      This should help. (www.seikouri.com)

      .head_logo {
      margin: 10em 0 0 0;
      width: auto;
      height: 10em;
      background: url(logo.svg) no-repeat center center;
      background-size: auto 10em;
      }

      .cbp-af-header .head_logo {
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -o-transition: scale(1);
      -o-transition: all 0.2s;
      transition: all 0.2s;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1);
      }

      .cbp-af-header.cbp-af-header-shrink .head_logo {
      margin: 0.4em 0 0 0;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -o-transition: all 0.2s;
      -o-transition: scale(0.6);
      transition: all 0.2s;
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6);
      }

    • 16

      Thanks Mary Lou!, nice work.

      And thanks DJ, your image implementation works great 😉

  8. 17

    ADDING DROP DOWN MENU!**************************
    How can I add a drop down to this?
    Simply adding table elements ul, li to the css and html isn’t working out for me 🙁
    Please help.

  9. 18

    I really love this hiding menu. but is there a posibility to regain the full width by scrolling up. it should get big again soon as i scroll up one px not only when i reach the top of the page.

  10. 20

    Everything is fine and doing very well but i got some problem in loading stage. when i refresh the page it load from the very beginning like when you scroll down the page the header portion get smaller so do the logo. At this time if you load the page it give a glimpse of bigger sized header and then get smaller which i don’t want to, and it was supposed to load in small sized header. Same thing can happened reversely. So is there any solution that will help to get rid of that problem. I want to refresh the page exactly how it is loaded right now even i refresh the page.

  11. 21

    Very nice header but I can’t get it running.

    Getting this errors:

    Uncaught TypeError: Cannot read property 'classList' of null classie.js:36
    remove
    scrollPage

    Uncaught TypeError: Cannot read property 'classList' of null classie.js:36
    removeClass classie.js:36
    d

    Any ideas how I can get it run?

  12. 24

    Hi !
    I’m trying to get this work on IE8.
    IE detect a problem on the AddEventListener function.
    It seems possible to make it work with this kind of code :

    if (!someElement.addEventListener) {
    someElement.attachEvent(“onclick”, someFunction);
    }
    else {
    someElement.addEventListener(“click”, someFunction, false);
    }

    Anyone can help me to do the right thing ?
    Thanks !

    • 25

      Hi, this is so easy try following code:

      var cbpAnimatedHeader = (function() {

      var docElem = document.documentElement,
      header = document.querySelector( '.header' ),
      didScroll = false,
      changeHeaderOn = 20;

      function init() {
      if (!window.addEventListener) {
      window.attachEvent("onscroll", function( event ) {
      if( !didScroll ) {
      didScroll = true;
      setTimeout( scrollPage, 0 );
      }
      });
      }
      else {
      window.addEventListener("scroll", function( event ) {
      if( !didScroll ) {
      didScroll = true;
      setTimeout( scrollPage, 0 );
      }
      }, 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();
      })();

      I tested it on IE8 and it works.

  13. 27

    you have not mentioned anything about using classie jq, i got so confused not keeping the jquery file

  14. 28

    Hi Guys,

    Just installed this plugin. And have one small issue.

    Maybe you can help me.

    Via CSS clases I’m changing the header position to Fixed and it works, but it doesn’t look nice. I would like it to fadeIn when triggered, how can I achieve that?

    Please help,

    Thanks,

  15. 30

    Thanks for showing us this, I have tried to use it with wordpress but cannot get it to work 🙁 Can anyone give me some instructions on how to do this?

Comments are closed.