Question

我正在寻求在网站http://icscreative.com/#home上取得成效。当您向上滚动到站点顶部时，会出现带有背景图像的div并覆盖整个屏幕。然后当你向下滚动时，它向上抬起，露出它背后的内容，它不会向上滚动，而只是在它后面。

我无法理解如何实现这一目标。到目前为止，我创建了一个div，其相对位置名为.mainContent，其中包含我的内容，几段。我在其中放置了一个div，其中一个名为.slide的绝对位置具有背景图像，顶部和左侧为0，以便覆盖整个.mainContent div。

我想jQuery正在使用，但我不确定如何。我最初的想法是视差，但同时我不希望文本从屏幕底部向上滚动，我希望它留在.slide div后面。这纯粹是CSS吗？

提前致谢。

Raheel K。

编辑：这是我到目前为止所拥有的。 #blogHeader确实显示在#blog上，但是当向下滚动时，两个div一起移动并且一个停留在另一个上面。另外，我更改了选择器的名称。

HTML

<div id="blog">

<div id="blogHeader"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia ultrices commodo.   Pellentesque dictum consequat nulla, quis elementum ante ornare vel. Nunc non lacus eget diam rutrum tincidunt. Suspendisse vel turpis est. Nulla sit amet libero tellus. Etiam consequat quam rhoncus mauris cursus porta. In hac habitasse platea dictumst. Aliquam sollicitudin aliquet enim nec blandit. Vivamus faucibus, justo mattis euismod porttitor, metus tellus pulvinar velit, ac rutrum urna lorem id magna. Vestibulum diam lectus, pharetra nec pulvinar a, imperdiet at magna. Ut a pellentesque elit.</p>

</div>

CSS

#blogHeader{
    position: absolute;
    width:100%;
    height: 700px;
    background:url(media/images/image.jpg) no-repeat fixed 50% 50%; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1;
}

#blog{
    position: relative;
    z-index: 0;
}

编辑2：发布jsFiddle以更好地了解我正在尝试做什么以及我遇到的问题。 http://jsfiddle.net/rHg9d/

Answer 1

您想要调整每个部分的z-index。如果你＆＃34;检查元素＆＃34;在他们的网站上，你会注意到他们有一个带有类别名称的窗帘＆＃34;窗帘＆＃34;。每个＆＃34;幕布＆＃34;是您滚动浏览的另一部分。您还会注意到背景中的飞艇的图片的z-index为1，滚动页面的所有内容的z-index为3，这意味着他们会在顶部＆＃34; ＃34;飞艇div。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

如果不清楚，我可以发一个例子。

Answer 2

这种效应有时被称为“视差”。它实际上非常简单，可以单独用CSS完成，虽然JS会增强它。基本思想是在div上设置背景图像并将其位置设置为fixed。

background: url(img.jpg) no-repeat fixed 50% 50%;

这是一个简单的演示：http://www.pmob.co.uk/temp/parrallax2.htm

但是，在您链接到的网站的情况下，他们不使用此方法，而是使用纯JS方法。从快速浏览一下，他们可能正在使用Scrollax：https://github.com/karlbright/scrollax

向下滚动页面时向上滑动以显示其背后的内容

2 个答案: