使用jQuery获取scrollbottom

Question

我有以下代码,它获取用户从顶部和底部滚动的数量,然后使用这些值隐藏或显示阴影.

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

    });

});

顶部工作正常,但当你到达页面底部时底部应该隐藏但是如果你是从底部15像素再次显示.

示例:http://dev.driz.co.uk/shadow/

Answer 1

$(窗口).height(); //返回浏览器视口的高度

的$(document).height(); //返回HTML文档的高度

将您的代码更改为:

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

 });

});?