3

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

$(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/

4

2 回答 2

5

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

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

 });

});​
于 2012-10-09T10:24:46.327 回答
1

正确的工作示例是：

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

             });

            });

这是基于上面bhb的回答。

于 2012-10-09T10:45:41.970 回答