创建一个显示在折叠下方的固定元素[关闭]答案

【问题标题】：Creating a fixed element that shows up below the fold [closed]创建一个显示在折叠下方的固定元素[关闭]
【发布时间】：2013-03-05 04:28:11
【问题描述】：

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

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

【问题讨论】：

欢迎！这个网站是关于询问和回答与编程相关的问题，同时提供不起作用的代码。因此，我认为您应该在webmasters.SE 上提问。尽管如此，为了回答你，这种类型的页面被称为“单页布局”，它应该可以帮助你优化你的谷歌搜索（或搜索 SO）

标签： jquery css position fixed

【解决方案1】：

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

我会试试这个：

构建多层背景，全部为visibility:hidden，在position:fixed中相互叠加。
使用 jQuery 的 .scroll() 和 .addClass() 方法来选择要显示的背景。

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

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

【讨论】：