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.

$(document).ready(function() {

    if ( $(window).scrollTop() + $(window).height() >= $(window).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() >= $(window).height() - 15 ) {
            $('div.shadow-bottom').show();
        } else {
            $('div.shadow-bottom').hide();
        }

    });

});

The top works fine, but the bottom one should be hiding when you get to the bottom of the page BUT then show again if you are 15 pixels from the bottom.

Example: http://dev.driz.co.uk/shadow/

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.