Html 滚动固定容器的内部，直到指定结束

我有一个

.top容器

，它由两个div组成。第一个高度为100vh，第二个高度为20vh。在这个顶部容器之后还有一个div，我们称之为

。test div

我希望顶部容器滚动到它的第二个元素的末尾-总的来说，它应该滚动到120vh。进一步滚动，我希望testdiv与顶部容器重叠

我试图通过将顶部容器的位置更改为fixed来实现这一点，但它仅显示第一个元素，带有100vh

.top-container {
  z-index: -1;
  position: fixed;
  top:0;
}

您可以在以下堆栈中找到我的完整代码：