title: Reduce header height after scrolling
body: <p>I am working on webpage with quite a large header, about 180px. For a better user experience I want to reduce the size of header to about 100px once the user has started scrolling, everything is going smooth so far, however, I can't seem to get the logo to reduce the size of the logo in the header to well, or at least it's background size, any ideas?</p>
  
  <p><a href="http://jsfiddle.net/KQGyu/4/" rel="nofollow">http://jsfiddle.net/KQGyu/4/</a></p>
  
  <p>code as follows - </p>
  
  <pre><code>&lt;script&gt;
  $(function(){
      $('#header').data('size','big');
  });
  
  $(window).scroll(function(){
  if($(document).scrollTop() &gt; 0)
  {
      if($('#header').data('size') == 'big')
      {
          $('#header').data('size','small');
          $('#header').stop().animate({
              height:'100px'
          },600);
      }
  }
  else
  {
      if($('#header').data('size') == 'small')
      {
          $('#header').data('size','big');
          $('#header').stop().animate({
              height:'180px'
          },600);
      }  
  }
  });$(function(){
  $('#header').data('size','big');
  });
  
  $(window).scroll(function(){
  if($(document).scrollTop() &gt; 0)
  {
      if($('#header').data('size') == 'big')
      {
          $('#header').data('size','small');
          $('#header').stop().animate({
              height:'100px'
          },600);
      }
  }
  else
  {
      if($('#header').data('size') == 'small')
      {
          $('#header').data('size','big');
          $('#header').stop().animate({
              height:'180px'
          },600);
      }  
  }
  });
  &lt;/script&gt;
  
  
  
  
  
  
  
  
  
  
  &lt;script&gt;
  $(function(){
  $('#logo').data('size','big');
  });
  
  $(window).scroll(function(){
  if($(document).scrollTop() &gt; 0)
  {
      if($('#logo').data('size') == 'big')
      {
          $('#logo').data('size','small');
          $('#logo').stop().animate({
              width:'59px',height:'63px'
          },600);
      }
  }
  else
  {
      if($('#logo').data('size') == 'small')
      {
          $('#logo').data('size','big');
          $('#logo').stop().animate({
              width:'128px',height:'120px'
          },600);
      }  
  }
  });$(function(){
  $('#logo').data('size','big');
  });
  
  $(window).scroll(function(){
  if($(document).scrollTop() &gt; 0)
  {
      if($('#logo').data('size') == 'big')
      {
          $('#logo').data('size','small');
          $('#logo').stop().animate({
              width:'59px',height:'63px'
          },600);
      }
  }
  else
  {
      if($('#logo').data('size') == 'small')
      {
          $('#logo').data('size','big');
          $('#logo').stop().animate({
              width:'128px',height:'120px'
          },600);
      }  
  }
  });
  &lt;/script&gt;
  </code></pre>