使用 scroll_pos 的 Jquery UI 动画背景答案

【问题标题】：Jquery UI Animate background using scroll_pos使用 scroll_pos 的 Jquery UI 动画背景
【发布时间】：2014-10-06 16:41:44
【问题描述】：

我正在努力改变滚动上 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

这可能是导致问题的原因吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-mobile

【解决方案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+')');
});

【讨论】：