当我滚动浏览 KPR-verse 网站时，我注意到底部有这个很酷的效果。每当我看到这样的东西时，我总是想重现它。我的过程很简单：我首先尝试复制效果，然后创建一个博客来解释它是如何完成的，旨在将复杂的设计分解为易于理解的步骤。

起初，我常常怀疑自己是否能成功，但经过深思熟虑，我通常会找到一种方法将设计分解成碎片。通过连接这些部分，我设法达到了效果。废话说得够多了——让我们深入探讨如何自己制作它！

分解 KPR 诗句页脚效果

在网站末尾，您会在背景中找到 KPR 横幅。乍一看似乎有点复杂，但其实没那么复杂。

首先，创建一个带有 .container 类的 div。这将是我们教程的根元素。

接下来，将 .container 分为两部分：.subcontainer-wrapper 和 footer。页脚元素将包含 KPR 横幅。

现在，将 .subcontainer-wrapper 进一步分为两部分。上半部分包含我们网站的所有内容，而下半部分留空，没有背景——基本上不可见，但它仍然具有视口的宽度和高度。下半部分至关重要，因为它使我们能够看到页脚。

到目前为止，所有元素都处于正常的 HTML 流程中，即从上到下。现在，我们需要通过将页脚放在后面并将 .subcontainer-wrapper 放在前面来打破这个顺序。为此，我们将 .subcontainer-wrapper 设置为相对于其父 .container 的绝对位置。这将从正常的 DOM 流中删除 .subcontainer-wrapper。

这就是我们设置效果所需的全部内容。现在，用内容填充 .subcontainer-wrapper 的上部，但将下部（不可见的 div）留空。另外，将内容添加到页脚。

添加内容后，它应该看起来像这样。

上部隐藏了背景，当你向下滚动时，当可见内容结束时，不可见部分会显示页脚。瞧！就是这样——简单又容易。

_感谢您的关注！我希望您发现本指南很有帮助且易于理解。保持好奇心并不断探索！

原文：KPR-verse

演示站点：演示链接，在本次演示中，我使用了 Google I/O 站点 (https://io.google/2024/) 并对其进行了调整以展示类似的概念。

源代码：Github Link_