How to stick a div at the bottom of the page while scrolling after checkbox is checked

Question

Usually I don't ask questions...I'm looking for a solution until I give up, and this is the case here.

There are many similar questions to my but after a thorough search I found nothing.

So the question is: After selecting a checkbox the div at the bottom of the page shuold be sticky untill the user scrolling down to the original place where it was.

I have a great example from kickstarter web site : If only I could know how they do it :)

If I was not clear enough I'd love to explain myself better.

Thanks in advance

Answer 1

After clicking on checkbox,

You can add these CSS lines to div

position:fixed; bottom:0;

Answer 2

when you check the check box. create div with position fixed and store the offset of the bottom edge of the window that would be normally your window height. Assign scroll event and keep checking if the scroll value is equal to the offset you have stored and when it reached just remove the fixed position from the div.

Answer 3

My guess (and if I was doing it) It'll be done by monitoring scroll position and applying a css style or not accordingly.

Something like

1. Inject it in invisible state in to the document
2. Note it's position (y coord)
3. Apply class to make it stick to the bottom of the window and show
4. On scroll, as soon as you get near the expected yCoord, remove the class and let it assume it's rightful place in the document
5. On further scroll (when you scroll away), re-apply class until you scroll back

HTH

Answer 4

If i have understood your question, I guess what you want is 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 not, please explain us with more code and what exactly you need

Answer 5

you want to add position: fixed and attach it to the bottom of the container when checked

html

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

js

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;
    }
});

fiddle - http://jsfiddle.net/qak2ept6/

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

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