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

Question

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

我希望获得一些反馈，了解如何在页面向下滚动时让标题的背景颜色（浅灰色）从 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/