Jquery 当向下滚动div时，如何使背景颜色淡入

我目前正在为自己设计一个小的单页公文包，你可以看到到目前为止。我试图实现的是，当你向下滚动div时，背景会从透明变为现在的黄色。此外，我希望它从黄色淡入灰色，当你不断滚动

基本上和我做的一模一样

我整天都在网上搜索，在尝试了10多个不同的教程、阅读了无数的论坛并自言自语后，我没有发现任何适合我的东西。我可以处理html和css，但对于jquery却一无所知，所以在编写自己的代码时，我不知道从哪里开始

如果有人能给我一个正确的方向，我将不胜感激

谢谢

您可以使用设置动画

    $(document).scroll(function(){
    t = (100 - $(this).scrollTop())/100;
    if(t<0)t=0;
    $('.skyB').css({opacity: t})
  })

$（文档）。滚动（函数（）{
t=（100-$（this.scrollTop（））/100；
如果（t这如何，请参见（解释如下）：

在这种情况下，最好跟踪上次选中的元素，以便在意识到自己做得太过分时使用“上次之前的一个”（未选中此代码）

//为第一个元素之前的滚动位置指定默认颜色
var last_color=“#FFF”；
$。每个（高度、颜色、功能（键、值）{
var当前=$（值[0]）；
如果（滚动位置<当前偏移量（）.top）{
$（“body”）.css（“背景”，最后一种颜色）；
}
最后的颜色=值[1]；
});

您提供的链接似乎做了类似的事情，正如有人指出的，您可以使用jQuery UI变体
.animate（）
在颜色之间淡入淡出（尽管在我的示例中，只有50个像素的停止，200毫秒的动画太长了）.
到目前为止你一直在尝试什么？意识到一旦你达到某一点，网站的背景div就会改变颜色。你能做些什么来指定如果高度>=x，背景div会改变颜色？这几乎奏效，但只有在我向下滚动浏览器窗口时，它才开始褪色。浏览器窗口本身不会滚动，它是div contai如果站点内容溢出，则使用您的元素id
$（'div'）
而不是
$（文档）
var height_colors = [
    [0, "#FFF"],
    [50, "#FFFF00"],
    [100, "#FF0000"],
    [150, "#FF00FF"],
    [200, "#00FF00"],
    [250, "#0000FF"],
    [300, "#00FFFF"],
    [350, "#123456"],
    [400, "#654321"],
    [450, "ABCDEF"],
    [500, "FEDCBA"]
];

var box = $("#lipsum");
box.on("scroll", function () {
    var scrollPos = $(this).scrollTop();
    $.each(height_colors, function(key, value) {
        if(scrollPos < value[0] || key == height_colors.length - 1) {
            box.css("background", value[1]);
            return false;
        }
    });
});

var height_colors = [
    ["#elem-a", "#FFF"],
    ["#elem-b", "#555"],
    ...
]

 // Assign a default color for scroll positions before your first element
var last_color = "#FFF";
$.each(height_colors, function(key, value) {
    var current = $(value[0]);
    if(scrollPos < current.offset().top) {
        $("body").css("background", last_color);
    }
    last_color = value[1];
});