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

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

基本上，我是要学习如何模仿那种精确的效果。我想一个图像是固定的，但显示在下面的折叠。我确信答案在jQuery中，但我不知道从哪里开始。

我会尝试以下方法：

构建多层背景，所有背景都

可见性：隐藏

，在

位置：固定

中相互重叠

使用jQuery的

.scroll（）

和

.addClass（）

方法选择要显示的背景

我在JSFIDLE中实现了一个示例：

---

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

用非常简单的话来说，你可以像任何其他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>

内容
内容
内容
内容

欢迎加入SO！这个网站是关于询问和回答与编程相关的问题，同时提供不起作用的代码。因此，你应该就我认为的问题提出你的问题。不过，为了回答您的问题，这种类型的页面被称为“单页面布局”，这将帮助您优化谷歌搜索（或搜索等）