title: Change header size and image on scroll
body: <p>I was kindly helped out with this issue but am having some more problems.</p>
  
  <p>I'm wanting my header to change height when the user scrolls and with a smooth transition. </p>
  
  <p>Currently it seems to be working but the content is being clipped when the height is adjusted on the nav, even though I have <code>overflow:visible</code> on the nav.</p>
  
  <p>Secondly the animation seems to come in as soon as you scroll, even a little, whereas I want it to start when scrolled past 100px.</p>
  
  <p><a href="http://jsfiddle.net/thXDt/" rel="nofollow">JSfiddle</a></p>
  
  <pre><code>$(function(){
  $(document).scroll( function() {
      var value = $(this).scrollTop();
  
      if ( value &gt; 100 ){
          $("nav").animate({height:100},"slow");
  
      }
      else{
         $("nav").animate({height:45},"slow");
      }
  });
  });
  </code></pre>
  
  <p>I also want the image to reduce to 80% of the size at present with a smooth transition.</p>