jquery - 创建一个显示在首屏下方的固定元素

Question

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

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

Answer 1

我会试试这个：

1. 构建多层背景，所有这些背景visibility:hidden在position:fixed.
2. 使用 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>