After browsing through numerous questions on StackOverflow similar to this one, I attempted various solutions but unfortunately, nothing seemed to work for me. :(
Greetings!
- My current setup involves utilizing a MVC model in PHP.
- I'm incorporating GSAP & ScrollMagic technologies for my webpage.
As I scroll down the page, images appear in a specific order.
Interestingly, when the trigger reaches the second image, I notice the footer peeking from behind the image.
https://i.sstatic.net/WpgOW.png
This is how my folder structure looks:
-- 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 issue I'm facing can best be visualized with the following snippet:
- To highlight the footer more prominently, I changed its background color to orange.
- Please note that the provided solution does not adhere to the MVC model.
For a clear demonstration of the problem, refer to this CodePen link: https://codepen.io/hlim18/pen/MRWjbp.
Various attempts were made to resolve the issue:
[FIRST TRY]
Following guidance from this particular question on StackOverflow, I implemented the suggested code I found on 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;
}
Regrettably, this approach did not yield the desired outcome.
[SECOND TRY]
The accepted answer from this specific StackOverflow thread recommended fixing the footer at the bottom.
-- However, this contradicts my intent, as I aim to show the footer only once a user has scrolled to the very bottom.
[THIRD TRY]
An article on CSS-Tricks offered five methodologies for creating a sticky footer:
- 3 methods focusing on fixed height footers inclusive of my initial attempt
- 1 method involving flexbox
- 1 method involving grid.
In my case, I experimented with the grid technique.
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;
}
Unfortunately, even this strategy failed to produce the desired result: https://codepen.io/hlim18/pen/LvYNaZ :(
[FOURTH TRY]
I attempted the approach outlined in the accepted response from this related query on StackOverflow.
footer {
position:absolute;
right:0;
left:0;
}
Alas, this too was unsuccessful: https://codepen.io/hlim18/pen/eoYdpW :(
If anyone could offer insights on resolving this issue, I would be tremendously grateful. Thank you!