Question

我想和此页面完全一样。 http://www.googleventures.com/

当你向下滑动页面的下半部分时，它就像一个视差效果。如何将图像作为标题？纯粹的jquery？是否有onSlide功能？

Answer 1

我做了另一种选择。您甚至不需要z-index，因为较新的元素在z-index中自动更高。

<强> HTML

<div class="fixed">
  <img src="http://placekitten.com/800/300" />
  This is some text that will be static as well
</div>
<div class="scroll">
  Lorem ipsum dolor sit amet
</div>

<强> CSS

.fixed{
    position: fixed;
}
.scroll{
    background: #eee;
    height: 700px;
    position: relative;
    top: 350px;        
}

工作示例：http://jsfiddle.net/3vxBA/

Answer 2

这看起来只是标题有一个固定的位置和一个较低的z-index，所以当你定期滚动时，页面继续向上，但标题保持在主要内容后面的相同位置。

示例HTML：

<body>

<div id="header">
some image here
</div>

<div id="pagecontent">
everything else
</div>

</body>

示例CSS：

body {
    padding-top: 100px; /* #header height */
}

#header {
    position: fixed;
    top: 0px;
    z-index: -1;
    background-color: #ccccff;
    height: 100px;
    width: 100%;
}

#pagecontent {
    background-color: #ccffcc;
    height: 1000px;
    width: 100%;
}

以下是一个工作示例：http://jsfiddle.net/Nv7Ku/

视差滚动效果

2 个答案: