让div在到达终点时停止并被下一个覆盖

Question

这让我疯了！

我正在尝试创建一个效果，其中一个页面包含多个连续的div，当前div的最后一个像素滚动到视图中，而不是div继续向上滚动屏幕，它保持锚定在底部的视口，将由下一个div掩盖。

每次出现这种效果时，都要创造一个故事新篇章的感觉。

我认为我可以使用CSS中的基本视差技术来做到这一点，但是我越是通过教程工作越清楚，它就越不可能。这是一个jquery情况？如果是这样的话，我已经离开了我的深度...

如果这个描述让你感到困惑，我总是可以绘制图表：）

这里有基本内容，但我没有尝试修复我害怕。我只是难过...... https://jsfiddle.net/x6t86umv/

#chapter_1 {
background-color: blue;
}

#chapter_2 {
background-color: red;
}

#chapter_3 {
background-color: green;
}  

<div id="chapter_1" class="chapter">
<p>Contents of chapter 1 (including child divs)</p>
<p>Contents of chapter 1 (including child divs)</p>
<p>Contents of chapter 1 (including child divs)</p>
<p>Contents of chapter 1 (including child divs)</p>
</div>

<div id="chapter_2" class="chapter">
<p>Contents of chapter 2 (including child divs)</p>
<p>Contents of chapter 2 (including child divs)</p>
<p>Contents of chapter 2 (including child divs)</p>
<p>Contents of chapter 2 (including child divs)</p>
</div>

<div id="chapter_3" class="chapter">
<p>Contents of chapter 3 (including child divs)</p>
<p>Contents of chapter 3 (including child divs)</p>
<p>Contents of chapter 3 (including child divs)</p>
<p>Contents of chapter 3 (including child divs)</p>
</div>