title: jQuery - Sticky header and animated logo when scrolling
body: <p>I've have a div with id="header" with another div id="logo" ("position:absolute") the inside of which is higher than the header div is. </p>
  
  <p>When scrolling down the page I want to stick the header to the top of the window (which works with no problem) <strong>AND</strong> slide the logo to top <code>-125px</code> so that only a small part of the logo is visible.</p>
  
  <p>Sliding up when scrolling down causes no error, but when I scroll back to the top I have a big delay sliding the <code>#logo</code> back to its original positon.</p>
  
  <p>Here is my code:</p>
  
  <p>jQuery:</p>
  
  <pre><code>var top = jQuery('#header').offset().top;
  jQuery(window).scroll(function() {
       if(jQuery(this).scrollTop() &gt; top) {
          jQuery('#header').addClass('header_fixed');
          jQuery('#content').addClass('content_fixed');           
      } else {
          jQuery('#header').removeClass('header_fixed');                  
          jQuery('#content').removeClass('content_fixed');
      }
      if(jQuery('#header').hasClass('header_fixed')) {
          jQuery('#logo').animate({top:'-125px'}, 500);
      } else {
          jQuery('#logo').animate({top:'0px'}, 500);
      }
  });
  </code></pre>
  
  <p>Thank you.</p>