Getting the scrollbottom using jQuery

Question

I have the following code which gets the amount the user has scrolled from the top and the bottom and then using these values it should hide or show the shadows.

<         


        

Answer 1

$(window).height(); // returns height of browser viewport

$(document).height(); // returns height of HTML document

Change your code to:

$(document).ready(function() {

 if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
    $('div.shadow-bottom').show();
 }

 $(window).scroll(function() {

    if ($(window).scrollTop() >= 15) {
        $('div.shadow-top').show();
    } else {
        $('div.shadow-top').hide();
    }
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
        $('div.shadow-bottom').show();
    } else {
        $('div.shadow-bottom').hide();
    }

 });

});​

Answer 2

The correct working example is:

$(document).ready(function() {

             if ($(window).height() < $(document).height()) {
                $('div.shadow-bottom').show();
             }

             $(window).scroll(function() {

                if ($(window).scrollTop() >= 15) {
                    $('div.shadow-top').show();
                } else {
                    $('div.shadow-top').hide();
                }
                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
                    $('div.shadow-bottom').hide();
                } else {
                    $('div.shadow-bottom').show();
                }

             });

            });

Which is based on bhb's answer above.