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

    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(){})