0

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

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

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

提前致谢。

拉希尔·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/

4

2 回答 2

0

您想调整每个部分的 z-index。如果您在他们的网站上“检查元素”，您会注意到他们有一个类名为“窗帘”的 div。每个“窗帘”都是您滚动浏览的不同部分。您还会注意到背景中的飞艇图片的 z-index 为 1，而滚动到页面外的所有内容的 z-index 为 3，这意味着它们位于 blimp div 的“顶部”。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

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

于 2013-07-24T22:07:54.207 回答
0

这种效果有时被称为“视差”。它实际上非常简单，可以单独使用 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

于 2013-07-24T22:09:17.167 回答