title: jquery ScrollTop animation percent not pixels
body: <p>I would first like to say that I am new to jQuery. I am using this script to animate the background color of two divs when the user scrolls to that point. the first div works fine, but #contact doesn't work because #contact is positioned 500% from the top, so the animation fires when I scroll down 500 pixels. I do not know how to change it from pixels to percent.</p>
  
  <p>I am using this with just the color section of java UI and the latest version of jQuery.</p>
  
  <p>Also, I know this is another question but is there a way once you scroll past the div for it to go back to its original state so that if the user scrolls back up, the animate will fire again? </p>
  
  <p><strong>JS FIDDLE</strong> <a href="http://jsfiddle.net/8SWG4/" rel="nofollow">http://jsfiddle.net/8SWG4/</a></p>
  
  <blockquote>
    <p>$(window).scroll(function() {</p>
  
  <pre><code>if($(window).scrollTop() &gt; 500){
  $("#contact").stop().animate({
        backgroundColor:  '#fff',
      }, 1000);
  }
   else{
  
  $("#about").stop().animate({
        backgroundColor:  '#000',
      }, 1000);     
   }
  
  });
  </code></pre>
  </blockquote>