JQuery UI Анимация фона с помощью scroll_pos

Question

Я работаю над сменой фона div на прокрутке. Он работает, но не последовательно. Иногда он не меняется, когда вы переходите в верхнее положение. В других случаях это происходит, но в анимации есть задержка. Любая идея, где я ошибаюсь?

var scroll_pos = 0; 
     $(document).scroll(function() { 
      scroll_pos = $(this).scrollTop(); 
      if(scroll_pos > 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 < 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); 
      } 
     }); 

Я использую JQuery Mobile также, так что моя документация готова на самом деле;

$(document).on('pageinit', function 

Возможно ли, что это вызывает проблему?

Answer 1

взглянуть на этот пример перехода цвета от черного до белого на свитке документа, вы можете использовать логику как это, если вы хотите, чтобы цвет меняться в зависимости от положения прокрутки: DEMO

var length=255/($(document).height()-$(window).height()); 
$(document).scroll(function(){ 
    var amount=Math.ceil($(document).scrollTop()*length); 
    $('body').css('background-color','rgb('+amount+','+amount+','+amount+')'); 
});