CSS / JS内容向上滚动而不是向下滚动

Question

我正在建立一个网站，导航栏横跨整个网站并且已经修复。 在导航栏下面有一个图像，一个背景图像，它被设置为封面。而在图像下是主要内容。

向下滚动时，导航栏会从上到下覆盖图像，主要内容现在可见，有效地向下滚动。我想＆＃34;反向＆＃34;它。所以导航仍然固定在它下面的封面图像，但这一次，当你向下滚动时，主要内容出现并从下到上覆盖图像。因此，当您向下滚动时，主要内容会向上滚动。

让我们说我的图像顶部为1，底部为2。因此，通常当您向下滚动导航栏从上到下覆盖图像时，1将消失，2将被显示，直到它也被覆盖。我正在寻找的效果将使2消失，1将保持在同一个地方，直到它被主要内容覆盖。

我研究了视差，但我不确定这是否合适。我不知道如何实现这种效果。

希望你能理解我在这里做的事情。如果您需要更多信息，请告诉我。

提前致谢。

修改

效果可以在abduzeedo frontpage

上看到

Answer 1

您需要将图像“附加”到背景中吗？ 如果是这样，你不能把它修复到后台吗？

body {
    background-attachment:fixed;
}

来源： http://www.w3schools.com/cssref/pr_background-attachment.asp         https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

注意：小心使用W3Schools，他们的信息通常不正确，请参阅here。

Answer 2

以下是img元素的示例。

Demo

^{code view}

基本的HTML布局：

<nav></nav>
<img src="/image.ext" class="scrollup" />
<div class="main"></div>

正如您所说，您的导航将定位固定。图像也需要固定定位。我们将其z-index设置为-1以确保它已被掩盖。

img {
  position: fixed;
  width: 100%;
  z-index: -1;
  top: 20px; left: 0;
}

主要元素相对定位。由于我们的导航和图像都具有固定定位，因此top值相对于视口的顶部。 100%表示我们开始滚动后.main就会启动。

.main {
  background: white;
  position: relative;
  top: 100%;
}