Is it possible to display the footer only when I scroll to the very bottom of the page using ScrollMagic?

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!

Answer №1

To implement a footer at the bottom of the page, refer to the code snippet below:

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#footer",
    duration: 1000,
     triggerHook: 3
  })
  .setPin("#footer")
  .addTo(controller);

Check out the complete code here.

... Code block for various animations and effects ...
... CSS styles for different elements used in the animation ...
... Additional script files and dependencies involved in the animation ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

html form-- assistance required in making new input area appear upon clicking radio button

Currently, I am in the process of creating a basic customer database using mysql and php. My goal is to have extra input fields appear for mailing address when users click on the radio button labeled "different mailing address". However, I'm unsure ab ...

Adjusting the size of content with CSS

I've been attempting to get an image to cover the entire screen on a device using CSS, but so far I haven't had any success. The image is within an :after pseudo element and content tag. Since it needs to be laid over the HTML, I can't use t ...

selenium for extracting data from span class tag

After trying to click the button with the text "details," I encountered a "no element found" error. It seems like the tag is within a child class... span _ngcontent-tbi-c3="" class="ng-star-inserted">Details</span Below is my Python code snippe ...

How can modifications be made to HTML strings passed through props in React?

I'm working on implementing a pre-loader icon before an image is rendered in a React component using the code snippet below: export default class MediaPostItem extends BaseComponent { public constructor(props: IMediaPostItemProperties) { ...

acquire information using ajax in conjunction with jquery

I am currently working with the following code: <div data-role="content"> <div data-role="content"> <form id="registerForm" action="/register" method="post" data-ajax="false" class="ui-body ui-body-a ui-corner-al ...

Tips for executing a jQuery function on multiple sets of elements

Currently, I have a list with all items sharing the same class name. There is a jQuery plugin that identifies the tallest element and sets the height of all list items to match the tallest one. My goal is to run this method for each UL group individually. ...

What are some ways to create a one-sided design without being limited by container constraints

How can I create a block on my site where there are no container restrictions on the right, but they are limited on the left? The goal is to have an image pressed against the right edge of the page while keeping the container limits on the left. Here is my ...

The value of "asp-route-id" is dynamically determined through the use of

Hey there, I’m looking to dynamically pass a value from "codeDrink" to my controller using "asp-route-id" and Ajax in my ASP.NET MVC project. This is how I am handling it in my view: <p> <a id="deleteLink" asp-action="Delete& ...

Align the text on the same horizontal line

I have been struggling with this issue for hours. Here is my Header.js <div className="navbar-inner"> <h2>Text1</h2> <h3>Text2</h3> </div> This is the content of my Header.css: .navbar-inner { ...

Learn how to dynamically add comments to HTML elements in AngularJS

Here is the meta tag that I have: <meta title='raja' identifier> I would like to know how to manipulate the DOM so it looks like this: <!-- reference <meta title='raja'> --> Could you recommend a way to manipulat ...

To generate a new <div> element by clicking a button and then clicking on it using C# Selenium

Before clicking the button, this is the initial HTML code for the page: <div id="layerContainer"> </div> After clicking the button, the code changes as shown in the picture here I have been attempting to locate the new button, but I keep rec ...

Combining CSS, jQuery, and HTML into a single .html file would allow for seamless integration

I've been searching extensively, but I haven't been able to locate exactly what I need. My goal is to merge my jQuery and CSS into a single .html file, but I'm struggling to get the jQuery functionality to work. Although I have experience wi ...

css: positioning images with overlap in a responsive layout

Two divs have been created with background images, both displaying the same image but in different colors - one grey and the other green. These images are waveforms. Initially, only the grey image (div1) is visible while the green image (div2) remains hid ...

Difficulty transferring form information to PHP utilizing Ajax

Originally, I had a traditional HTML form that submitted data through a button, redirecting the user to the page where the PHP code ran successfully. Now that everything is functioning as expected, I aim to pass the form variables to PHP using Ajax in ord ...

coding with javascript and css

Essentially, I am trying to add padding specifically to the left side of this code snippet: if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("livesearch").innerHTML=xmlhttp.responseText; document.getElementById("live ...

Leveraging SVG filters for enhancing text with unique borders

I recently discovered a helpful tip on adding a background to text in SVG using a source. However, I am still unsure how to incorporate a border around the text. <svg width="100%" height="100%"> <defs> <filter x="0" y="0" width="1" ...

Expandable Buttons - Bootstrap version 3.3.4

I'm currently working with a bootstrap collapsible button group and I'm facing an issue where only one group box should be visible at any given time. I tried creating a JavaScript function to remove the "in" class and update the aria-expanded att ...

The leave animation for Angular's ngAnimate and ng-view feature appears to be malfunctioning

angular version: 1.6.1 I am attempting to create a fade in/out effect for my ng-view element, however, I am encountering an issue where only the enter animation is functioning properly. This is the relevant HTML code: <main class="main" ng-view>&l ...

Differentiate input elements with custom styling

I'm experiencing an issue while trying to style a specific form field in Angular 7. The style doesn't seem to be applying properly. Below is my form structure: <ul> <li> <mat-form-field *ngIf="number"> <input ma ...

Is it possible for amCharts to show the data properly?

Starting out with amCharts and javascript can be a bit overwhelming. Here is the structure of my html file: <!DOCTYPE html> <html> <head> <link rel="shortcut icon" href=""> <title>chart created with amCharts | amChar ...