Release a stationary element upon scrolling down the page

Question

Release a stationary element upon scrolling down the page

I have a calculator feature on my website which was coded in php. At the end of this calculator, there is a section that displays the results.

While the results div works properly on desktop, I am looking to implement a fix for mobile devices. Specifically, I want the results div to be fixed at the bottom until the user scrolls back to its original position on the page. Once they reach the original position of the div, I would like it to become static again.

In simpler terms, there is an element on the page that stays fixed to the bottom initially, but becomes unstuck once the user scrolls back up to where it originally was.

To better illustrate what I'm trying to achieve, you can view an example page. Make sure to take a look at the MOBILE version!

Could anyone please advise me on how to accomplish this?

Thank you in advance!

javascript jquery css sticky

Answer 1

Answer №1

Below is the method I have used in the past:

Determine the original position of the bottom of the element.
Calculate the height of the viewport.
Subtract the viewport height from the original bottom position to find the scroll position needed for the entire element to be visible.
Add a scroll listener to the window to monitor the scroll position and apply or remove the fixed class accordingly.

For example:

// Get the document element for later use.
var doc = document.documentElement;

// Retrieve the important message element.
var importantMsg = document.getElementById('important-msg');

// Find the distance between the bottom of the message and the top of the page without it being fixed.
var originalMsgBottom = importantMsg.getBoundingClientRect().bottom;

// Obtain the window's height.
var windowHeight = Math.max(doc.clientHeight, window.innerHeight || 0);

// Determine the scroll position to be tracked while scrolling.
var scrollPosition = originalMsgBottom - windowHeight;

// Set the message as fixed by default.
importantMsg.className = 'important-msg-fixed';

// Create a function to check the current scroll position against the previously defined position.
var scrollFunction = function() {
var scrollTop = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
  if (scrollTop >= scrollPosition) {
    importantMsg.className = ''; // If met, remove the fixed class.
  } else {
    importantMsg.className = 'important-msg-fixed'; // If not, add it.
  }
}

// Have our function run every time the window scrolls.
window.addEventListener('scroll', scrollFunction);

#important-msg {
  background: #f00;
  color: #fff;
  padding: 10px;
}
.important-msg-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
}

<h1>Lorem Ipsum</h1>
<p>Scroll Down</p>
<p>Scroll Down</p>
...
<p id="important-msg">Important Message</p>
<p>More Stuff</p>

Answer 2

Below is the method I have used in the past:

Determine the original position of the bottom of the element.
Calculate the height of the viewport.
Subtract the viewport height from the original bottom position to find the scroll position needed for the entire element to be visible.
Add a scroll listener to the window to monitor the scroll position and apply or remove the fixed class accordingly.

For example:

// Get the document element for later use.
var doc = document.documentElement;

// Retrieve the important message element.
var importantMsg = document.getElementById('important-msg');

// Find the distance between the bottom of the message and the top of the page without it being fixed.
var originalMsgBottom = importantMsg.getBoundingClientRect().bottom;

// Obtain the window's height.
var windowHeight = Math.max(doc.clientHeight, window.innerHeight || 0);

// Determine the scroll position to be tracked while scrolling.
var scrollPosition = originalMsgBottom - windowHeight;

// Set the message as fixed by default.
importantMsg.className = 'important-msg-fixed';

// Create a function to check the current scroll position against the previously defined position.
var scrollFunction = function() {
var scrollTop = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
  if (scrollTop >= scrollPosition) {
    importantMsg.className = ''; // If met, remove the fixed class.
  } else {
    importantMsg.className = 'important-msg-fixed'; // If not, add it.
  }
}

// Have our function run every time the window scrolls.
window.addEventListener('scroll', scrollFunction);

#important-msg {
  background: #f00;
  color: #fff;
  padding: 10px;
}
.important-msg-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
}

<h1>Lorem Ipsum</h1>
<p>Scroll Down</p>
<p>Scroll Down</p>
...
<p id="important-msg">Important Message</p>
<p>More Stuff</p>

Answer 3

Answer №2

If you couldn't care less about IE browsers (or if you happen to stumble upon this in the year 2022 :D)
you have the option to utilize position: sticky

.sticky{
  position: sticky;
  bottom: 0;
  background: red;
}

<div class="content">
  <p style="border:4px dashed;height:150vh;">Keep scrolling</p>
  <div class="sticky">I'M STICKY</div>
</div>

<div class="content">
  <p style="border:4px dashed;height:150vh;">Scroll back up</p>
</div>

For further compatibility information, visit here: https://caniuse.com/#feat=css-sticky

In case you desire a (sort of?) substitute you may consider:

.sticky{
  position: absolute; /* falls back to absolute */
  width: 100%;        /* fallback width */
  position: sticky;
  bottom: 0;
  background: red;
}

Answer 4

If you couldn't care less about IE browsers (or if you happen to stumble upon this in the year 2022 :D)
you have the option to utilize position: sticky

.sticky{
  position: sticky;
  bottom: 0;
  background: red;
}

<div class="content">
  <p style="border:4px dashed;height:150vh;">Keep scrolling</p>
  <div class="sticky">I'M STICKY</div>
</div>

<div class="content">
  <p style="border:4px dashed;height:150vh;">Scroll back up</p>
</div>

For further compatibility information, visit here: https://caniuse.com/#feat=css-sticky

In case you desire a (sort of?) substitute you may consider:

.sticky{
  position: absolute; /* falls back to absolute */
  width: 100%;        /* fallback width */
  position: sticky;
  bottom: 0;
  background: red;
}

Release a stationary element upon scrolling down the page

Answer №1

Answer №2

Similar questions

Creating a responsive navbar with a custom width form

Encountering an "invalid query parameter" error when making a find request with FeatherJS and ReactJS

Exploring the differences between two CSS style attributes using JQuery

Applying Regular Expressions in Java to "convert" a CSS style into an HTML tag style

When using AJAX, make sure it doesn't overwrite the global variable for JQUERY

The Media Queries in the Wordpress html5blank theme are failing to function properly

Creating an HTTP request inside an Export Function in a MEANJS application

Encountering a problem during the installation of the udev module in a Node.js

Using jQuery UI to make elements sortable and draggable, while also retrieving the index of the dragged element

Tips for building forms with VUE?

Verify the status of the mongodb server synchronously

Tips for managing a multi-page website with AngularJS

developing authentication codes using javascript

What is the use of the typeof operator for arrays of objects in TypeScript?

Display HTML content within a Material-UI Card component using React

The scrollHeight property for a textarea element that is set as

Tips for adding a class to the end of the DOM class

Looking to automate the selection of a dropdown menu using Selenium with JavaScript

Move the DIV element to the bottom of the webpage

The MediaSource API is not supported on Chrome 27