jQuery - Sticky header that shrinks when scrolling down

Question

I wonder how to make a sticky header shrink(with animation) when you scroll down the page and goes back to normal state when the page is scrolled up to the top. Here are two examples to clearify:

http://themenectar.com/demo/salient/

http://www.kriesi.at/themes/enfold/

I get the part to make it fixed, but how should I do to shrink my header when the user scrolls down?

Thanks a ton

Answer 1

This should be what you are looking for using jQuery.

$(function(){   $('#header_nav').data('size','big'); });  $(window).scroll(function(){   if($(document).scrollTop() > 0) {     if($('#header_nav').data('size') == 'big')     {         $('#header_nav').data('size','small');         $('#header_nav').stop().animate({             height:'40px'         },600);     } } else   {     if($('#header_nav').data('size') == 'small')       {         $('#header_nav').data('size','big');         $('#header_nav').stop().animate({             height:'100px'         },600);       }     } }); 

Demonstration: http://jsfiddle.net/jezzipin/JJ8Jc/

Answer 2

Here a CSS animation fork of jezzipin's Solution, to seperate code from styling.

JS:

$(window).on("scroll touchmove", function () {   $('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0); }); 

CSS:

.header {   width:100%;   height:100px;   background: #26b;   color: #fff;   position:fixed;   top:0;   left:0;   transition: height 500ms, background 500ms; } .header.tiny {   height:40px;   background: #aaa; } 

http://jsfiddle.net/sinky/S8Fnq/

On scroll/touchmove the css class "tiny" is set to "#header_nav" if "$(document).scrollTop()" is greater than 0.

CSS transition attribute animates the "height" and "background" attribute nicely.