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

我不确定我的问题措辞是否恰当，因此我将尽可能深入细节

让我们假设我有一个包含几个部分的普通页面：1、2、3和4。每个部分都有自己的内容，但假设

第3部分

有大量内容，我试图做的是在到达该部分时将

第3部分

固定到我的视口高度，然后使内容溢出。完成内容滚动后，我将转到第4节

我尝试了一些东西，但我似乎不能得到它的权利，我真的不知道要寻找什么

以下是我尝试过的代码片段：

在该示例中，您可以看到第3节的问题。如果我使用这种技术，我看不到第4节。因此，我最好将

section3

的内容溢出，直到结束，然后移到

section4

Sketch.com提供了一个很好的例子，说明了我在他们的TOS页面上努力实现的目标。您可以看到，当右侧的侧边栏一直保持到本节末尾，然后页面继续时，术语是如何滚动的： 看看这个

步骤1-在第3节的容器上添加ID，并使用所述API进行观察。当它到达视口顶部时，添加一个类，该类将添加position fixed和overflow-y作为滚动

步骤2设置另一个观察者观察最后一个元素。在视口中，可以从第3节中删除固定类