javascript - Getting the scrollbottom using jQuery - Stack Overflow

admin管理员组

文章数量:1287097

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: /

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/

• javascript
• jquery

Share Improve this question Follow edited Oct 9, 2012 at 9:56 Cameron asked Oct 9, 2012 at 9:46 CameronCameron 28.9k102102 gold badges288288 silver badges490490 bronze badges 2

• It would be really helpful if you can post html and css. :) – bhb Commented Oct 9, 2012 at 9:51
• Added example to original post. – Cameron Commented Oct 9, 2012 at 9:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

$(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();
    }

 });

});​

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.

本文标签： javascriptGetting the scrollbottom using jQueryStack Overflow