在 http://www.googleventures.com/ 上使用如何实现效果？答案

【问题标题】：How to achieve effect used on http://www.googleventures.com/?在 http://www.googleventures.com/ 上使用如何实现效果？
【发布时间】：2012-07-07 08:06:39
【问题描述】：

我需要一些帮助来重新创建在http://www.googleventures.com/ 上找到的效果我怎样才能做到这一点？任何帮助将非常感激！我虽然可能有视差，但我不知道该怎么做......请帮忙！

【问题讨论】：

其实这完全可以用css来完成。您只需要一个具有相对前景的固定背景 div，其 margin-top 值足够大以显示背景 div
我很确定你可以用html9responsiveboilerstrapjs.com做到这一点
好吧，别开玩笑了，这是一个非常简单的 css 技巧。
恕我直言，不管提供的其他“cmets”如何，问题主题中通过引用描述的效果可能不是永久的。说“我想要这个效果，给我看”通常几乎不会成为关于 SO 的有效问题。也许其中一个嘘声合唱团想详细说明他们的天才，但我投票以“不具建设性”作为结束。对不起。欢迎！

标签： jquery html css web scroll

【解决方案1】：

给你，http://jsfiddle.net/xbXhD/1/

顶部 div 可以有链接等，就像在 Google Ventures 上一样，而不仅仅是一张图片。你明白了:)

【讨论】：

非常感谢您的帮助！明白了！
欢迎来到 SO！如果您发现它有用，请将答案标记为已接受。并阅读 Jared 在顶部的评论。此外，在询问 SO 之前，您应该先付出自己的努力。干杯！

【解决方案2】：

您应该可以使用margin-top。看这个简单的例子：http://jsfiddle.net/lbstr/QE3Qh/11/

请允许我解释一下我在小提琴中做了什么：

您有两个 div，#fixed 和 #content。

#fixed 有一个导航菜单，顾名思义是固定的。 z-index: 1 确保它位于 #content div 之下。这是css：

#fixed { position: fixed; top: 0; padding: 200px 0;z-index: 1 }

#content 有一个很大的margin-top，当滚动到页面顶部时，我们可以看到#fixed。它有一个更高的z-index，因此它会在滚动时显示在#fixed 之上。不要忘记添加一些position，否则z-index 没有任何意义。这是css：

#content { margin-top: 400px; background-color: white; z-index: 2; position: relative; }

【讨论】：

您在答案中包含的内容（不在链接中）实际上并不等于记录您的效果。它确实有效，但请在您的答案中记录下来。 :)
我已经用一些解释更新了我的答案。它在 Chrome 和 FF 中对我来说工作正常。
我同意。也许那是在我编辑之前。那时我没有太多解释......
“upvoted”的答案也没有，我怀疑它被所说的downvoter赞成。

【解决方案3】：

检查这是否有帮助 - http://www.ianlunn.co.uk/plugins/jquery-parallax/

你也可以通过 css 实现视差

【讨论】：

我认为这对于这种情况来说有点过分了，但我认为它不值得一票否决，所以我将你提高到 0。