jQuery: Hide element if user scrolled to the end of the page

Question

I want to show an element if the user scrolls to a certan position on the page. But I also want to hide the element if the user reaches the end of the page.

For now I only have the code to show the element:

( function( $ ) {

    $(document).scroll(function() {
        var y = $(this).scrollTop();
        if (y > 800) {
            $('.sticky-bottom').fadeIn();
        } else {
            $('.sticky-bottom').fadeOut();
        }

    });

} ( jQuery ) );

But how can I hide it at the end of the page? There is nothing like .scrollBottom.

Answer 1

What about

$(document).scroll(function() {

    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
        // you're at the bottom of the page
        $('.sticky-bottom').fadeIn();
    } else {
        $('.sticky-bottom').fadeOut();
    }

});

I added a fiddle (show up the console of the fiddle) to verify the addition of the margin that you need (800). It can be vary it depends on your design, I just use a console because I don't know if you are working with an object that is sticky to bottom for e.g.

https://jsfiddle.net/97s6p51n/