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

Question

我找到了许多解决方案来显示阴影或在内容具有top < 0px;时将类添加到顶部横幅。但是，我想知道是否有一种方法可以在滚动时慢慢淡入阴影中，这样阴影也许在滚动10px后只有opacity:0.5？

Google在Google 页面中使用了它，您在滚动内容，然后在滚动滚动时慢慢逐渐褪色，但如果您再次滚动，也会再次淡出。有人可以告诉我如何用jQuery和css3？

我看过了这一

也许可以按步骤进行操作。这是行不通的，但它可能会给您一个想法。

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过渡来淡入/输出fixed元素上的box-shadow。

更新：

emo - 替代解决方案box-shadow的不透明度反映滚动位置，其中页面顶部的100px（和更大）的滚动位置为100％不透明度（零透明度），而从顶部则10px为10％（或0.1）不透明度（90％透明度）。

Answer 2

也许以更具体的方式提出您的问题，也许是运行示例？但是模式应该是这样的：

1. 给您的DIV CSS阴影属性/或使用在较旧浏览器上也有效的图像。
2. 将滚动事件上的2绑定到文档的一个，一个用于向上。
3. 写一个函数，以改变.css atribute ...