如何实现http://www.googleventures.com/上使用的效果?

时间:2012-07-06 23:36:05

标签: jquery html css web scroll

我需要一些帮助来重新创建http://www.googleventures.com/上发现的效果我希望在我的网站上创建一个标题和内容滑块,当页面的其余部分滚动它时它保持不变。我怎样才能做到这一点?任何帮助将非常感激!我虽然可能有视差,但我无法弄明白该怎么做...请帮忙!

3 个答案:

答案 0 :(得分:5)

在这里,http://jsfiddle.net/xbXhD/1/

顶级div可以在Google Ventures上拥有链接等,而不仅仅是图片。你明白了这个想法:)

答案 1 :(得分:1)

您应该能够使用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; }​

答案 2 :(得分:0)

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

你也可以通过css实现视差