Jquery 向下滚动页面时向上滑动div，以显示页面后面的内容

我正在寻求在网站上实现效果。当您向上滚动到站点顶部时，会出现一个带有背景图像的div，并覆盖整个屏幕。然后，当你向下滚动时，它会向上移动，显示出它后面的内容，这些内容不会向上滚动，而只是停留在它后面

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

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

提前谢谢

拉希尔K

编辑：这是我到目前为止的资料。#blogHeader确实显示在#blog上，但向下滚动时，两个div一起移动，一个位于另一个之上。此外，我还更改了选择器的名称

HTML

---

编辑2：发布JSFIDLE以更好地了解我正在尝试做什么以及我遇到的问题

要调整每个零件的z索引。如果您在他们的站点上“检查元素”，您会注意到他们有一个类名为“窗帘”的div。每个“窗帘”都是您滚动浏览的不同部分。你也会注意到背景中的飞艇图片的z索引为1，所有从页面上滚动的东西的z索引为3，这意味着它们位于飞艇div的“顶部”。

---

如果不清楚，我可以举个例子

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

fixed

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

下面是一个简单的演示：

---

但是，对于您链接到的站点，他们没有使用此方法，而是使用纯JS方法。快速看一眼，他们可能正在使用Scrollax:

，只是想让你知道，在那个网站上滚动对我来说太慢了。也许你需要对它进行一些优化。我确实理解z-index，但如果你能发布一个例子，我将不胜感激。另外，请看我对原始帖子的编辑。拉尔夫，我使用了你建议的方法，效果很好，但我还需要div移动，而后面的div保持不变。请看我在原始帖子中的编辑。你能不能把你到目前为止的一些东西发一篇？也许可以更详细地描述您想要什么，因为我现在还不清楚。我需要与背景图像的div移动时，向下滚动，以显示其背后的div内容。我仍然不太清楚您希望看到什么，但也许可以尝试删除

#blogHeader

上的

position:absolute

，看看这是否是您想要的效果。

#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;
}

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