title: Jquery UI Animate background using scroll_pos
body: <p>I am working on changing the background of a div on scroll.  It works, but not consistently.  It sometimes doesn't make the change back when you scroll to the top position.  Other times it does, but there is a delay in the animation.  Any idea where I am going wrong here?</p>
  
  <pre><code>    var scroll_pos = 0;
          $(document).scroll(function() { 
              scroll_pos = $(this).scrollTop();
              if(scroll_pos &gt; 1) {
              $('.head').animate({'background-color':'rgba(0,0,0,1)'}, 500);
              $('.header li a, .header li a:visited, .header li a:active').animate({'color':'rgba(255,255,255,1)'},500);          
              } 
              if(scroll_pos &lt; 1){
                  $(".head").animate({'background-color':'rgba(223,223,223,0.8)'}, 500);
                  $(".header li a, .header li a:visited, .header li a:active").animate({'color':'rgba(60,60,60,0.7)'}, 500);
              }
          });
  </code></pre>
  
  <p>I am using Jquery Mobile also, so my document ready function is actually;</p>
  
  <pre><code>    $(document).on('pageinit', function
  </code></pre>
  
  <p>Is it possible that this is causing the issue?</p>