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

看一下在文档滚动时将颜色从黑色转换为白色的示例，如果希望颜色根据滚动位置改变，可以使用这样的逻辑： {{3} }

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+')');
});