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