jquery - 当页面向下滚动时，我可以让我的标题的背景颜色淡入吗

Question

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

我希望得到一些关于如何让我的标题的背景颜色（浅灰色）在页面向下滚动时从 0 不透明度淡化到 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 轴上滚动的像素数量，height：文档高度 - 窗口高度

+.3 将保持最小的不透明度，因此如果您向上滚动，您的标题仍然存在。

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