4

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.

nicael
  • 18,550
  • 13
  • 57
  • 90
Mc Gyver Basaya
  • 143
  • 6
  • 16

3 Answers3

6

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.

Jakob
  • 1,129
  • 9
  • 24
6

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>
nicael
  • 18,550
  • 13
  • 57
  • 90
  • This will only work if the content is bigger than the viewport height, right? – Berendschot Dec 22 '15 at 15:28
  • @Beren If the content is bigger than the viewport, it's already like "scrolled" to the bottom, right? :) This happens with any sticked footers. – nicael Dec 22 '15 at 15:29
  • @nicael But it is not stitched to the bottom footer. – Berendschot Dec 22 '15 at 15:30
  • @Berend oh sorry! Will do soon (a bit busy now). – nicael Dec 22 '15 at 15:31
  • @Berend Hm, I've come with the solution to get the percentage height for the popping footer, though this anyway wouldn't be needed because if you intend to use this model, you'll surely make a larger page (as an example, mine is too small). – nicael Dec 22 '15 at 16:02
1

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

aw04
  • 10,857
  • 10
  • 56
  • 89
  • @McGyverBasaya Sure, you just need to change the display property of whatever you wish to show/hide when the condition is met. Also probably want to add an else condition to change things back when they scroll up – aw04 Dec 22 '15 at 15:15
  • thanks aw04 that what I need of some part, but is there possible to fix the position of first column base on the code above? as my question above, I want to show only the first column then show the second column when the user reach the bottom of the page.. Is that possible? – Mc Gyver Basaya Dec 22 '15 at 15:19