javascript - 文字视差效果

Question

在我的网站上，我想使用一种视差效果。但通常情况下，您只会将背景图片固定到屏幕上，因此允许滚动“覆盖”它，我想要的是我所有内容的相同内容。

该网站是一个包含多个部分的一页。每个部分在横向屏幕上的最小高度为 100vh。如果说第 1 部分在视口(viewport)中，用户应该正常滚动，直到该部分的底部到达屏幕底部。在下一个容器进入视口(viewport)的那一刻，section 1 应该被固定，这样 section 2 就像一张纸一样滑过 section 1，首先覆盖底部的内容。

你知道如何做到这一点吗？我不需要完整编码的示例，只需要一些关于如何执行此操作的想法。

提前致谢。

---

更多细节

我认为我对我想要得到的东西的解释有点含糊，所以我要稍微扩展一下。

假设您有 5 张纸，每张纸上都有一些内容，比如关于部分，另一张纸上有一些功能等等。现在每张纸都有视口(viewport)的高度，所以你看到的就是那张纸。如果内容大于您的视口(viewport)，工作表也会变大。我认为这是很明显的。如果您向下滚动页面，您看到的那张纸应该向上滚动，直到它的末尾与视口(viewport)边框相匹配。现在，当滚动这张纸时，它不会向上移动，而是停留在那个确切的位置。工作表 2 上的新内容滑过它，就像一个新层。

Answer 1

也许你的意思是这样的？

<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 );

})

还有一些sass

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/ (也许更更新)

PS:可以改进，但仍然不知道这是否是您要找的