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

Question

当内容有 top < 0px; 时，我找到了很多显示阴影或向顶部横幅添加类的解决方案。 .但是，我想知道是否有一种方法可以在滚动时慢慢淡化阴影，这样阴影可能只有一个 opacity:0.5。例如，滚动 10px 之后？

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

更新:

DEMO — 替代解决方案，其中 box-shadow 的不透明度反射(reflect)滚动位置，其中距页面顶部 100px(及更大)为 100% 不透明度(零透明度)，距顶部 10px 为 10 %(或 0.1)不透明度(90% 透明度)。