It looks like there are several questions on StackOverflow similar to this question. However, I tried several methods and nothing worked for me. :(
Hello!
- I'm currently using a MVC model in PHP.
- I'm using GSAP & ScrollMagic for this webpage.
When I scroll down the page, images show up in an order.
By the way, when the trigger reaches the second image, I see the footer behind the second image.
My folder structure is the following:
-- 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') ?>
The following code shows the problem:
- I changed the footer background to orange to show the footer more clearly.
- This doesn't include the MVC model, though.
Please check out this CodePen to see what happens: https://codepen.io/hlim18/pen/MRWjbp.
I tried several methods to solve the problem:
[FIRST TRY]
After reading this StackOverflow question, I added the following code that I got from 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;
}
However, that didn't solve my problem.
[SECOND TRY]
Accepted answer of this StackOverflow question suggested fixing the footer at the bottom.
-- This is NOT what I want. I want to show the footer at the bottom only when a user finishes scrolling to the bottom.
[THIRD TRY]
This CSS-Tricks article showed five ways for making a sticky footer:
- 3 ways of requiring fixed height footers including my first try
- 1 way of using flexbox
- 1 way of using grid.
I tried the grid method.
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;
}
This didn't work either: https://codepen.io/hlim18/pen/LvYNaZ :(
[FOURTH TRY]
I tried the accepted answer of this StackOverflow question.
footer {
position:absolute;
right:0;
left:0;
}
It didn't work either: https://codepen.io/hlim18/pen/eoYdpW :(
How could I solve this problem? I'd greatly appreciate any help. Thank you!
