Tips for keeping a div fixed at the bottom of the page when scrolling after a checkbox has been selected

Question

Tips for keeping a div fixed at the bottom of the page when scrolling after a checkbox has been selected

Typically, I don't ask questions until I've exhausted all other solutions...but here we are.

Despite my efforts in searching, I have not found any similar questions to mine.

So, my question is: How can I make a div at the bottom of the page sticky after selecting a checkbox, only returning to its original position when the user scrolls back up?

I came across an example on the Kickstarter website that demonstrates this feature: I wish I knew how they achieve it :)

If my explanation was unclear, please let me know so I can provide further details.

Thank you in advance

javascript jquery html css

Answer 1

Answer №1

Once the checkbox is selected,

Feel free to apply the following CSS code to the div element

position:fixed; bottom:0;

Answer 2

Once the checkbox is selected,

Feel free to apply the following CSS code to the div element

position:fixed; bottom:0;

Answer 3

Answer №2

Looking to make an element have a fixed position at the bottom of its container when checked

HTML

<div class="wrapper">
    <input type="checkbox" id="check"/>
    <div id="foot"></div>
</div>

JavaScript

var check = document.getElementById('check');
var foot = document.getElementById('foot');

check.addEventListener('change', function () {
    if (check.checked) {
        foot.style.position = 'fixed';
        foot.style.bottom = 0;
    }
});

JSFiddle link - http://jsfiddle.net/qak2ept6/

Update - http://jsfiddle.net/qak2ept6/1/ restore position when unchecked

Additional Update - http://jsfiddle.net/qak2ept6/3/ attach on scroll

Answer 4

Looking to make an element have a fixed position at the bottom of its container when checked

HTML

<div class="wrapper">
    <input type="checkbox" id="check"/>
    <div id="foot"></div>
</div>

JavaScript

var check = document.getElementById('check');
var foot = document.getElementById('foot');

check.addEventListener('change', function () {
    if (check.checked) {
        foot.style.position = 'fixed';
        foot.style.bottom = 0;
    }
});

JSFiddle link - http://jsfiddle.net/qak2ept6/

Update - http://jsfiddle.net/qak2ept6/1/ restore position when unchecked

Additional Update - http://jsfiddle.net/qak2ept6/3/ attach on scroll

Answer 5

Answer №3

By selecting the checkbox, a fixed position div is generated and the offset of the window's bottom edge is saved as the default window height. A scroll event is assigned to continually monitor if the scroll value matches the stored offset. Once it reaches this point, the fixed positioning on the div is removed.

Answer 6

By selecting the checkbox, a fixed position div is generated and the offset of the window's bottom edge is saved as the default window height. A scroll event is assigned to continually monitor if the scroll value matches the stored offset. Once it reaches this point, the fixed positioning on the div is removed.

Answer 7

Answer №4

In my opinion (and if I were the one doing it), the best approach would involve tracking the scroll position and dynamically adjusting a css style as needed.

Here is a potential solution:

Start by injecting the element into the document in an invisible state
Take note of its initial position on the page (y coordinate)
Add a class to make it stick to the bottom of the window and become visible
While scrolling, once the element reaches the expected y coordinate, remove the sticky class and let it flow normally in the document
If the user continues to scroll past the element, reapply the sticky class until they return to view it

I hope this helps!

Answer 8

In my opinion (and if I were the one doing it), the best approach would involve tracking the scroll position and dynamically adjusting a css style as needed.

Here is a potential solution:

Start by injecting the element into the document in an invisible state
Take note of its initial position on the page (y coordinate)
Add a class to make it stick to the bottom of the window and become visible
While scrolling, once the element reaches the expected y coordinate, remove the sticky class and let it flow normally in the document
If the user continues to scroll past the element, reapply the sticky class until they return to view it

I hope this helps!

Answer 9

Answer №5

It seems like you are looking for a solution related to sticky elements. If that's the case, you can check out an example here

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}
$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

If this is not what you were looking for, please provide more details and code so we can better assist you.

Answer 10

It seems like you are looking for a solution related to sticky elements. If that's the case, you can check out an example here

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}
$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

If this is not what you were looking for, please provide more details and code so we can better assist you.

Tips for keeping a div fixed at the bottom of the page when scrolling after a checkbox has been selected

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

jQuery ajax issue: Unable to locate file using relative path

Utilizing Web Worker to Load Textures in Three.js

What is the reason behind Ramda having multiple curry functions in its source code, much like Redux having multiple compose functions?

Generating PDF files utilizing AJAX technology with FPDF

Having trouble with NPM Moment.js in React: Why is moment__WEBPACK_IMPORTED_MODULE_2__format not functioning properly?

Checking for the existence of a date in an array and retrieving its corresponding ID using AngularJS

Is it advisable to store JSON data in data params instead of making an AJAX call?

arranging and organizing a collection of objects

The global function is not recognized within the Angular controller script

What is the best way to show a scrollbar within a container?

Tips on retrieving an item using jQuery's select2 plugin

Vue.js application returning 404 error when trying to include a script in index.html

How can we stop the page from scrolling after a click?

What can you do to ensure Vue detects input element changes after using preventDefault?

Troubleshooting a bug in React TypeScript with conditional logic

Best method for connecting user input with a class

Activating a div in React.js using setActive: Step-by-step guide

Creating dynamic props for Element UI components can be achieved by utilizing Vue's re

Unexpected error occurred when attempting to fetch the jQuery value of the radio button: "Unrecognized expression syntax error"

Serialization of JSON is not possible for the data type <code>[object Promise]</code>