Show footer when reaching bottom of page

Question

I saw some similar questions, but they didn't give me a solution. I would like my footer show (slideUp) when reaching the bottom of the page and hide again when scrolling towards the top. Now i'm using a script that shows the footer after a certain amount of scrolling.

Here the Fiddle

Does anyone know how?

$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
    $( 'footer').slideDown(300);
} else {
    console.log('there');
    $('footer').slideUp(300);
}
});

Answer 1

Try this check working jsfiddle

 $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            $('footer').slideDown(300);
        } else {
            $('footer').slideUp(300);
        }
  });

Answer 2

将$(this).scrollTop()与您的窗口/身体高度而不是固定值进行比较。

Answer 3

  var height; var trigger = 350; $(window).scroll(function() { height = $(document).height()-$(window).height(); console.log(height+" "+$(this).scrollTop()); if ($(this).scrollTop() > height - trigger) { $( 'footer').slideDown(300); } else { $('footer').slideUp(300); } }); 

For better performance, put the window height calculation and document height calculation outside of scroll function and run it instead once after load ( $(){} ) and recalculate it on window resize ( $(window).resize(function(){} )