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

$(window).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 に答える