Show Footer When User Scrolls To The Bottom Of The Page

Here is my footer code.

the part that always showing at the bottom

Solution 1:

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><divid="foo-pop"><b>POP!1!!!1!!1!11!</b></div><divid="foo-boring">The boring footer.</div>

Solution 2:

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.

Solution 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

Share