滚动时将阴影应用于固定的顶部横幅

Question

我发现许多解决方案可以在内容为top < 0px;时显示阴影或向顶部横幅添加类。但是，我想知道是否有一种方法可以在滚动时慢慢淡入阴影中，例如，在滚动10px之后，阴影可能只有opacity:0.5？

Google在Google+信息页中使用它，您可以在其中滚动内容，然后滚动时顶部下方的阴影会慢慢淡入，但如果再次向上滚动，也会再次淡出。有人可以告诉我这是用jquery和css3做的吗？

我看过this one，但唯一不对的是我希望阴影在滚动时越来越淡。我不希望它突然出现。

也许有可能分步进行..这不起作用，但它可能会给你一个想法..

var done = $(document).scrolltop() - 20x;
// now we can use this number as 100% scrolled

$(document).scroll(function() {
    // here we can animate the shadow opacity after 20%, 40%, 60%, 80% and 100%
}

Answer 1

DEMO - 这样的话？

此示例使用CSS3过渡淡入/淡出box-shadow元素上的fixed。

更新

DEMO - 替代解决方案，其中box-shadow的不透明度反映了滚动位置，其中100px（和更高）距离页面顶部是100％不透明度（零透明度）和10px从顶部是10％（或0.1）不透明度（90％透明度）。

Answer 2

以更具体的方式提出您的问题并提供一个运行示例？但模式应该是这样的：

1. 为div提供css shadow属性/或使用也适用于旧浏览器的Image。
2. 将滚动事件上的2绑定到文档1上，然后将其中一个关闭。
3. 编写一个改变.css属性的函数......