jQuery - Sticky header that shrinks when scrolling down

user2362529 picture user2362529 · May 8, 2013 · Viewed 149k times · Source

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

jezzipin picture jezzipin · May 8, 2013

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/