0

我找到了许多解决方案来显示阴影或在内容具有top < 0px;. 但是，我想知道是否有一种方法可以在滚动时慢慢淡入阴影，opacity:0.5例如，阴影在滚动后可能只有 10px？

谷歌在 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%
}
4

2 回答 2

6

演示——像这样的东西？

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

更新：

演示- 不透明度反映滚动位置的替代解决方案，其中box-shadow距页面顶部 100 像素（或更大）为 100% 不透明度（零透明度），距顶部 10 像素为 10%（或 0.1）不透明度（90% 透明度）。

于 2012-11-07T16:11:24.210 回答
0

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

  1. 为您的 div 提供 css shadow 属性/或使用也适用于旧版浏览器的图像。
  2. 将滚动事件上的 2 个绑定到 Document 一个用于向上，一个用于向下。
  3. 编写一个改变 .css 属性的函数...
于 2012-11-07T15:39:51.723 回答