jQuery - スクロール時に縮小するスティッキーヘッダー

質問

粘着性のあるヘッダーを、ページを下にスクロールするとアニメーションで縮小し、上にスクロールすると通常の状態に戻るようにするにはどうしたらよいのでしょうか。以下、2つの例を挙げて説明します。

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

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

固定にする部分はわかったのですが、ユーザーがスクロールした時にヘッダーを縮小するのはどうすればいいのでしょうか？

ありがとうございます。

どのように解決するのですか？

これは、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);
      }  
  }
});

デモです。 http://jsfiddle.net/jezzipin/JJ8Jc/