title: Animate on scroll with jQuery
body: <p>Ok, I'm facing an issue when trying to animate several elements of the DOM, using a condition on a scroll event.
  First of all, I'm using Drupal 7 so the jQuery library I'm using is of version 1.4.4.</p>
  
  <p>Now, I want to shrink the size of my header when the page srolls down by changing css properties of elements inside of it.</p>
  
  <p>So first, on the scroll event, I check the scrollTop position of the window. If the position is different than 0 (meaning that the page is scrolled down), I trigger the animation on the elements inside the header. </p>
  
  <p>If the position is equal to zero, I want the css properties to fall back to their original state so the header retrieve its full size.</p>
  
  <p>The first part of the animation works fine. When I scroll down the page, the header shrinks as expected. But when I scroll the page back up to the top, the second animation doesn't work.. the animations are all buggy and occur after several second and go wild, changing back and forth the css properties affected by the <code>animate()</code> function.</p>
  
  <p>Does anyone have a clue on how to clear this out ??</p>
  
  <p>Here is the simplified portion of the code I'm using:</p>
  
  <pre><code>$(window).scroll(function(){            
  
      if($(window).scrollTop() != 0){
          $('#myFirstElement').animate({marginTop: '20px'}, 300);
          $('#mySecondElement').animate({top: '20px'}, 300);
      }       
      else {
          $('#myFirstElement').animate({marginTop: '32px'}, 300);
          $('#mySecondElement').animate({top: '32px'}, 300);
      }
  
  });
  </code></pre>