如何在div向下滚动时使背景颜色消失

我目前正在为自己设计一个小小的页面组合，您目前可以看到here。我想要实现的是，当您向下滚动div时，背景会从透明变为现在的黄色。此外，当你继续滚动时，我希望它从黄色渐变为灰色。如何在div向下滚动时使背景颜色消失

基本上就像this website已经做到了。

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

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

谢谢。

来源

2013-07-27 Oliver Stanley

到目前为止你一直在尝试什么？ –

认识到，一旦你达到某个点，该网站的背景div改变颜色。你可以做什么来指定，如果高度> = X，背景色变色？ –

您可以jQuery UI

来源

2013-07-27 18:16:20 John

动画试试这个

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

FIDDLE Demo

希望它可以帮助你

来源

2013-07-27 18:39:45

这几乎工作，但它只是开始褪色时，我滚动浏览器窗口。浏览器窗口本身不滚动，它的DIV包含滚动的溢出位置的网站内容 –

使用你的元素id'$（'div'）'而不是'$（document）'' –

这个怎么样，看到JSFiddle（下文解释）：

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

给定一个可滚动的div #lipsum，并[<height>, <color>]值的数组，当我们滚动我们的元素，我们检查它的scrollTop()值，并遍历我们的数组，直到我们找到一个height值比当前scrollTop()低。

现在，这可以通过多种方式进行转换。例如，不是计算可滚动div的位置，可以计算滚动位置相对于document的相对位置，然后替换您的数组，作为要素数组以及要迭代的颜色。你会做同样的事情，但是计算迭代元素的offset，直到你得到一个offset大于当前scrollTop的元素。

您的新阵列可能看起来像：

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]; 
});

您提供的链接似乎做同样的事情，而且有人指出，你可以使用的.animate()的jQuery UI的变种颜色之间褪色（虽然我只有50例像素停止，200ms的动画太长了）。

来源

2013-07-27 20:17:07

如何在div向下滚动时使背景颜色消失

回答

相关问题