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

Question

我正在构建一个网站，其导航栏横跨整个网站，并且已修复。导航栏下方有一张图片，一张背景图片，设置为封面。而图片下方是主要内容。

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

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

我研究了视差，但我不确定这是否正确。我不知道如何做到这一点。

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

提前致谢。

编辑

效果可以在abduzeedo 首页上看到

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 时要小心，他们的信息通常不正确，请参见此处。

Answer 2

这是一个带有img元素的示例。

演示

^代码视图

基本的 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;
}

主要元素相对定位。因为我们的 nav 和 image 都有固定的定位，所以这个top值是相对于视口的顶部的。 100%意味着.main一旦我们开始滚动就开始了。

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