1

我想做与此页面完全相同的操作。http://www.googleventures.com/

当您向下滑动页面的下部时，它就像一个视差效果。如何使用图像作为标题来做到这一点？纯jQuery？有 onSlide 功能吗？

4

2 回答 2

4

我做了一个替代选择。您甚至不需要 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/

于 2012-05-16T19:33:05.147 回答
3

这看起来就像标题有一个固定的位置和一个较低的 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/

于 2012-05-16T19:32:13.437 回答