javascript - 文字视差效果

在我的网站上，我想使用一种视差效果。但通常情况下，你只需在屏幕上固定一个背景图片，然后允许滚动“覆盖”它，我想要的与我所有的内容是一样的。
这个网站只有一页，有几个部分。在景观屏幕上，各部分的最小高度为100vh。如果说第1部分在视窗中，用户应该正常滚动，直到该部分的最底部到达屏幕的底部。下一个容器进入视区时，应固定第一部分，以便第二部分像一张纸一样在第一部分上滑动，首先覆盖底部的内容。
你知道怎么做吗？我不需要完全编码的示例，只需要一些关于如何做到这一点的想法。
提前谢谢。
更多细节
我想我对我想要得到的东西的解释有点含糊，所以我要把这个扩展一点。
假设你有5张纸，每一张纸上都有一些内容，比如说一个关于部分，另一张纸上有一些功能等等。现在每一张纸都有一个视窗的高度，所以你看到的就是那张纸。如果内容大于您的视区，工作表也会变大。我想这很明显。如果您向下滚动页面，即您看到的纸张，则应该向上滚动，直到其末端与视口边框匹配为止。现在，当滚动这张纸时，不是向上移动，而是保持在原来的位置。第2页上的新内容像一个新层一样在上面滑动。

最佳答案

也许你的意思是这样的？

<main>
  <section class="orange fixed">
    <h2>
      Some text
    </h2>
  </section>
  <section class="blue">
    <h2>
      Some text
    </h2>
  </section>
  <section class="orange">
    <h2>
      Some text
    </h2>
  </section>
</main>

JS公司：

var $sections = $('main section');
var sectionHeight = $sections.eq(0).outerHeight();
var setCurrent = function(position ) {
    $sections.eq(position).addClass('fixed').siblings().removeClass('fixed');
}

$(window).on('scroll', function() {
  var scTop = $(window).scrollTop();
  var position = Math.ceil( scTop / sectionHeight );
  setCurrent( position - 1 );

})

还有一些沙士

body {
  margin: 0;
}

main {
  padding: 0;
  padding-top: 100vh; // this is the trick
  section {
    height: 100vh;
    text-align: center;
    color: white;
    padding-top: 200px;
    position: relative;
    margin: 0;
    h2 {
      margin: 0;
      padding: 0;
    }
    &.orange {
      background: orange;
    }
    &.blue {
      background: blue;
    }
    &.fixed { // this is the trick
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
  }
}

你可以在这里测试
https://jsfiddle.net/3r1Lm4ha/8/（可能更新更多）
附言：可以改进，但还是不知道这是不是你想要的

关于javascript - 文字视差效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38551404/