Show footer when user scrolls to the bottom of the page

Question

Here is my footer code.

<div class="row">
    <div class="col-md-12">
        <div> the part that always showing at the bottom  </div>
    </div>
    <div class="col-md-12">
        <div> show only if the user reaching the bottom of the page </div>
    </div>
</div>

My problem is I want my footer stick to the bottom of the page until the user reach the bottom, then show the other content.

Answer 1

Need a bit of Javascript here. The code below should work.

$(document).ready(function() {
    $('#footer-final').hide()
});

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $('#footer-inter').hide()
        $('#footer-final').show()
    }
});

I'm assuming you've already got the CSS to make the footer stick to the bottom of the page ( position:fixed; bottom=0; ) in which case you can then substitute any code to hide the intermediate footer and show whatever else you want to show when the users scrolls to the bottom.

Answer 2

With only the help of CSS, you can reconsider it as two footers, one popping, another boring ;)

 [id^=foo]{ background:orange; padding:5px; font-size:25px; } #foo-boring{ position:fixed; bottom:0; right:0; left:0; } #foo-pop{ position:absolute; height:70px; right:0; left:0; } 

 <div>SCROLL ME DOWN<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br> END.</div> <div id="foo-pop"><b>POP!1!!!1!!1!11!</b></div> <div id="foo-boring">The boring footer.</div> 

Answer 3

Here's a simple script to track the scroll position and compare it to the height. The condition is met when you scroll to the bottom. At that point you can do as you wish :).

window.addEventListener('scroll', function () {
    console.log('scroll: ' + (window.innerHeight + window.scrollY));
    console.log('height: ' + document.body.offsetHeight);
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)      {
        console.log('here!');
    }
});

https://jsfiddle.net/jzrgmeqg/1