如何实现带有滚动显示页脚的纯CSS视差滚动英雄？

Question

我对此并不陌生，所以如果我缺少明显的东西，请耐心等待。我四处搜寻并尝试了我能想到的所有方法，但无法使它正常工作。

我试图用CSS（完成）和一个固定的页脚实现视差滚动，当到达页面底部时（完成）“显示”固定的页脚，但是在尝试将两者结合时会遇到麻烦。

HTML如下：

<div class="page">
    <div class="cover">
        <div class="parallax-container">An image will go here.</div>
    </div>
    <div class="wrapper">
        <div class="about">(Content here)</div>
    </div>
</div>
<footer>
    <p>Footer goes here.</p>
</footer>

Codepen是here

视差英雄的设置似乎阻止了页脚正常工作，因为带有view：1（“ .page”）的100vh div最终阻止了与页脚中内容的交互。尽管看起来像我想要的样子，但这显然是一个问题，因为我想在页脚中放置链接。

我发现我可以添加一个额外的450px页边距底部（页脚的大小），以使.page不会覆盖页脚，但这会增加450px的向下滚动。类似地，将页边距从主要内容包装器切换到.page div（仅此）也增加了滚动冻结，然后才可能滚动到页脚。

如果有人可以提出一些可能的解决方案，我将非常感激！