如何在向下滚动ScrollMagic后到达页面末尾时才能显示页脚？

Question

看起来StackOverflow上有几个与此问题类似的问题。但是，我尝试了几种方法，没有任何方法可以帮助我。 :(

你好！

我目前在php中使用MVC模型。
我在这个网页上使用GSAP和ScrollMagic。

当我向下滚动页面时，图像会按顺序显示。顺便说一句，当触发器到达第二个图像时，我看到第二个图像后面的页脚。

我的文件夹结构如下：

-- controller
   -- backend
   -- frontend
      -- 0_header_and_footer.php
-- model
-- public
   -- css
   -- images
   -- js
      -- backend
      -- frontend
         -- 0_header_and_footer
         -- 1_work
         -- 2_writings
         -- 3_about
            -- personality.js
-- view
   personality.php
   -- backend
   -- frontend
         -- 0_header_and_footer
         -- 1_work
         -- 2_writings
         -- 3_about
            -- personality.php
index.php

view / template.php

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- code for <head> -->
</head>
<body>
    <?php require("view/frontend/0_header_and_footer/header.php");?>
    <?=$content?>
    <?php require("view/frontend/0_header_and_footer/footer.php");?>
</body>
</html>

view / frontend / 3_about / personality.php

<?php $title='Account'; ?>

<?php ob_start(); ?>

<h2 class="title"><a href="index.php?action=about_personality">Personality</a> / <a href="index.php?action=about_interests">Interests</a></h2>
<section>
    <!-- code for <section> -->
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="public/js/frontend/3_about/personality.js"></script>

<?php $content = ob_get_clean(); ?>
<?php require('view/template.php') ?>

以下代码显示了问题：

我将页脚背景更改为橙色以更清楚地显示页脚。
但是，这不包括MVC模型。

请查看此CodePen以了解会发生什么：https://codepen.io/hlim18/pen/MRWjbp。

我尝试了几种方法来解决这个问题：

[第一次尝试] 在阅读this StackOverflow question之后，我添加了以下来自this CodePen的代码。

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -80px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 80px; 
}

但是，这并没有解决我的问题。

[第二次尝试] 接受this StackOverflow question的回答建议将页脚固定在底部。 - 这不是我想要的。我想仅在用户完成滚动到底部时才在底部显示页脚。

[第三次尝试] This CSS-Tricks article展示了制作粘性页脚的五种方法：

需要固定高度页脚的3种方法，包括我的第一次尝试
1种方式使用flexbox
1种使用网格的方法。

我尝试了网格方法。

HTML

<div>
    <h2 class="title">...</h2>
    <section class="page-wrap">...</section>
</div>
<footer class="site-footer">...</footer>

CSS

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
footer {
  grid-row-start: 2;
  grid-row-end: 3;
  height: 80px;
}

这也不起作用：https://codepen.io/hlim18/pen/LvYNaZ :(

[第四次尝试] 我尝试了接受this StackOverflow question的答案。

footer {
    position:absolute;
    right:0; 
    left:0;
}

它也没有工作：https://codepen.io/hlim18/pen/eoYdpW :(

我怎么能解决这个问题？我非常感谢任何帮助。谢谢！