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轴上滚动的像素数量，高度：文档高度 - 窗口高度

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

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

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

2 个答案: