如何在滚动时修复视口中的部分并在内容滚动完成后继续下一个 div？

Question

我不确定我的问题是否措辞恰当，所以我会尽可能在这里详细介绍。

假设我有一个包含几个部分的普通页面：1、2、3 和 4。每个部分都有自己的内容，但是假设section 3有大量内容，我要做的是将section 3修复为当我到达那个部分然后溢出内容时我的视口高度。 滚动完内容后，我将转到section 4 。

我已经尝试了一些事情，但我似乎无法做到正确，老实说，我不知道要搜索什么。

这是我尝试过的代码片段： http://jsfiddle.net/h0u5zxqt/1

在该示例中，您可以看到第 3 节的问题。如果我应用此技术，我将看不到第 4 节。 所以最好是，我想溢出section3的内容，直到我到达最后，然后移动到section4 。

Sketch.com 有一个很好的例子来说明我在他们的 TOS 页面上想要实现的目标。 您可以看到条款是如何滚动的，而右侧的侧边栏会一直停留到该部分的末尾，然后页面继续： https://www.sketch.com/tos/

Answer 1

看看这个Intersection Observer API 。

步骤 1 - 在 section3 的容器上，添加一个 ID 并使用提到的 API 观察它。 当它到达视口的顶部时，添加一个 class ，它将添加 position 固定和溢出-y 作为滚动。

第 2 步- 设置另一个观察者来观察最后一个元素。 一旦它在视口中，您可以从第 3 部分中删除固定的 class。