Persistent button positioned at the bottom of the page, remaining visible even when scrolling to the very end of the content

I am looking to add a floating button that remains in the same position relative to the content until the window is scrolled to a certain point, after which it sticks to the end of the content.

In simple terms, I want the element to act as 'relative' until it reaches a specific position, and then change its behavior to 'fixed'.

I am exploring CSS solutions for achieving this effect. If not possible with stylesheets, I will consider a JavaScript solution.

Desired Outcome:

When the content block is above the specified position:

https://i.stack.imgur.com/rWlnq.png

And when it gets to the end so the initial position is below its bottom edge:

https://i.stack.imgur.com/154nP.png

javascripthtmlcss

Answer №1

Utilize position: sticky for modern browsers to stick content when it reaches the top or bottom.

Sticky positioning is a combination of relative and fixed positioning. The element acts as relatively positioned until it passes a certain threshold, then it becomes fixed positioned.

Learn more in this informative article on MDN.

.sticky-button {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  bottom: 10px;
}
<div style='width: 500px; height: 3000px; background: #ffffcc; padding: 20px'>
  <div style='width: 500px; height: 2000px; background: #eeffff; padding: 20px'>
    Page content
  </div>
  <button class='sticky-button'>Load more...</button>
</div>

Browsers that support this feature (source):

https://i.stack.imgur.com/4d96q.png

Unfortunately, there isn't a definitive specification for this feature yet - it has just been implemented in Webkit with some known issues. However, it works well for buttons.

Answer №2

Consider searching for a specialized library that can handle this task.

The concept may be simple, but achieving compatibility across all browsers can be challenging.

You will need to have an understanding of:

1. the height of the element: 

element.style.height

2. the height of the window: 

window.innerHeight

3. the scroll position of the window: 

document.body.scrollTop

These are the key parameters you'll require.

Check out this quick example I put together:

https://jsfiddle.net/t7j726c1/

Once again, it's recommended to explore using a library for this solution.

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

Exploring a one-dimensional nested array in order to make updates to the higher level nodes

I have a 1D nested array: nestedArr: [ { id: 1, parentId: null, taskCode: '12', taskName: 'Parent', duration: 0, assignee: '', crewCount: 0, startDate: null, endDate: null, dependencies: []}, { id: 2, parentId: 1, taskCo ...

javascripthtmlvue.jsrecursion

What exactly is the purpose of the colon in JavaScript's import statement?

Looking at the following example. import { QueryClientContract, TransactionClientContract } from '@ioc:Adonis/Lucid/Database' I am puzzled by the use of colons and I am unsure about where the imported files are being referenced from. ...

javascriptnode.jstypescriptes6-modulesadonis.js

How do I eliminate excess space following the resizing of the Material UI Drawer component?

I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...

cssreactjsmaterial-uinavigation-drawerwhitespace

Should we store $(this) in jQuery's cache, or leave it be?

When dealing with a selector such as $(this), does the act of creating and reusing a reference actually have a noticeable impact on performance? I find it more efficient to create references for jQuery selectors that are used repeatedly within the same sc ...

javascriptjquery

Understanding Node.js document object

Hey, I'm currently trying to execute a JavaScript function on the server side using node.js, but I've encountered an issue. The function relies on accessing hidden values within the returned HTML using the document DOM, however, the document obje ...

javascripthtmlnode.js

Send the user to the login page once their email has been verified

On my website, I have a process where users need to verify their email by clicking on a link sent through emails. When the user clicks on this verification link, I want them to be redirected to a page thanking them for confirming their account and then a ...

phpjavascripthtml

Getting an Array of all values in <th> using jQuery

Is there a more efficient way in jQuery to retrieve an array of all the inner texts of <th> elements within a table? The following code snippet successfully achieves this: $("th").toArray().map(th => th.innerText) I'm curious if there is a ...

javascripthtmljquerynode.js

Customize your AppBar with Material UI and NProgress integration

Snippet of Code: <AppBar color='inherit' position='fixed'><AppBar> I'm currently working with material-ui and facing an issue where nprogress doesn't show up at the top in my Nextjs App when using it in conjunctio ...

javascriptreactjsmaterial-uiprogress-barnext.js

Do you think there might be an issue with the CSS coding?

I have designed a user-friendly responsive login form that allows users to easily log in and reset their passwords. However, I am facing an issue where the username and password fields are not displaying on separate lines as intended. I have thoroughly ins ...

htmlcssforms

Encountering an issue stating "The element is not visible at the moment, therefore cannot be interacted with" while trying to access a text box within a window opened via an ajax call

Currently, I am working on a Selenium script using Java to automate a specific process. However, I have encountered an issue where clicking on a dropdown causes a hidden popup to appear through an ajax call. Unfortunately, when attempting to interact with ...

htmlajaxselenium

Error Message: Unable to retrieve property "country" as the variable this.props is not defined

Currently, I am developing a react application However, when running this function using infinite scroll, an error is encountered An Unhandled Rejection (TypeError) occurs: Unable to access the "country" property, since this.props is undefined async pa ...

javascriptreactjsreact-props

Modifying the color of Bootstrap icons

When I use PHP code to print this icon into a table, it looks like this: echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons">&#xE0BE;&l ...

htmlbootstrap-4

Store the information from an AJAX post request in a div element into the browser

I've set up a datatable with a button that posts data into a div. Below is the HTML code I used: HTML : <div class="card-body"> <div class="overlay" id="kt_datatable_nodata"> <div class="o ...

javascriptjqueryajaxdatatablelocal-storage

What is causing this issue with the basic HTML and CSS code that is preventing it from displaying correctly

What does the HTML code look like? <html> <head> <title>Homepage</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"></div> </body> </html> ...

htmlcss

There seems to be an issue with declaring Gulp Open

Here is the code snippet for my `open.js` task: import gulp from 'gulp'; import gulpOpen from 'gulp-open'; gulp.task('open', () => { // doesn't work with `function()` either. const options = { uri: 'local ...

javascriptnpmgulp

Overflow causes flexbox to become unreactive

Implementing the overflow style on a flexbox element appears to negatively impact its responsiveness. Here is the corresponding code snippet: .projects-wrapper{ display: flex; flex-wrap: wrap; justify-content: center; text-align: center; width ...

cssflexboxoverflow

Invoke a function within the React library through ReactDOM.render

Within my index.js file, I have the following code: const store = createStore( combineReducers({ i18n: i18nReducer }), applyMiddleware(thunk) ); syncTranslationWithStore(store) store.dispatch(loadTranslations(translationsObject)); stor ...

javascriptreactjs

Creating solid, dotted, and dashed lines with basic HTML/CSS for tcpdf rendering

Take a look at the image below. It combines two graphs, with different curves represented by solid lines, dotted lines, and various forms of dashed lines with varying stroke lengths. In summary: I am looking for a simple way to create solid lines, dashed ...

htmlcsstcpdf

Generating a JavaScript object based on an array of keys

I'm currently grappling with a task that is proving to be quite challenging. I have a set of arrays structured like this: ['key1', 'key2', 'key3'] ['key1', 'key2', 'key4'] ['key1', ...

javascriptjqueryarraysjsonpojo

What is the best way to share specific links on LinkedIn articles?

When the LinkedIn button is clicked, the entire link does not get passed when the image is clicked. However, the Facebook link works perfectly fine. The LinkedIn button used to work before, has anything changed since then? <div align="center"> < ...

javascripthtmlreactjslinkedin-api