我可以把我的头的背景色淡出的页面向下滚动

Question

首先，这是我的网站：my website

我希望得到有关如何使我的头的背景色（浅灰色）褪色从一些反馈当页面向下滚动时，将不透明度设置为100％。也许在第一个项目击中标题之前，灰色背景已经出现了。

在我的项目页面上，您可以看到边栏描述在某个点之后淡出。我想为我的标题，但不是整个div首先是隐形的，但只是背景颜色。

干杯！

Answer 1

您可以使用jQuery和绑定功能，事件scroll

$(document).bind("scroll", function() { 

    var scrollPos = $(window).scrollTop(); 
    var max = $(document).height() - $(window).height(); // Max avilable scroll position 
    var header = $("#header"); 

    header.css("opacity", scrollPos/max); 
    // OR 
    header.css("opacity", 1 - (scrollPos/max)); 
}); 

Answer 2

感谢，并给予好评，以@jjurm谁张贴的答案前，这里是有点更清洁和更好的例子：

$(document).bind("scroll", function() { 
    var scrolly = $(window).scrollTop(); 
    var height = $(document).height() - $(window).height(); 
    $("#header").css("opacity", scrolly/height +.3); 
}); 

变量： scrolly：在y轴上滚动的像素数量， 高度：文档高度 - 窗口高度

+.3会保持最小的不透明度，所以如果你向后滚动，你的头部仍然会在那里。

工作小提琴：http://jsfiddle.net/xDWQa/1/