Question

我正在尝试创建类似于this的效果。背景是固定的，但在某些元素之后会发生变化。我花了相当多的时间在这上面，仍然没有发现任何接近解释如何做到这一点。

基本上我是要学习如何模仿这种确切的效果。我想要修复一个图像，但是要显示在图像下方。我确定答案存在于jQuery中，但我不知道从哪里开始。

Answer 1

我会试试这个：

构建多层背景，所有背景visibility:hidden，在position:fixed中叠加在一起。
使用jQuery的.scroll()和.addClass()方法选择要显示的背景。

我在JSFiddle中实现了一个示例：http://jsfiddle.net/zbn2L/

背景是纯色，所以它们看起来并不固定，但我不想要侵犯版权。

Answer 2

用非常简单的话说，你可以把所有的“开口”（不同背景从后面出现的区域）变成任何其他div，但是

background-attachment:fixed

所以，如果你有

[背景]
[内容]
[内容]
[其他背景]
[内容]
[内容]
[又一个背景]

基本上是

  <div style="background-attachment:fixed"></div>
  <div>Content</div>
  <div>Content</div>
  <div style="background-attachment:fixed"></div>
  <div>Content</div>
  <div>Content</div>
  <div style="background-attachment:fixed"></div>

创建一个显示在折叠下方的固定元素

2 个答案: