9

ユーザーがページの一番下までスクロールすると、もちろんjQueryを使用してdivを表示したいと思います。ユーザーがスクロールして一番上に戻ると、div がフェードアウトします。ビューポートを計算する方法（または正しい名前は何でも）:)

ありがとう

4

4 に答える 4

13

これはあなたが始める必要があります：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2768264</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $(window).scroll(function() {
                    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
                        alert('Bottom reached!');
                    }
                });
            });    
        </script>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
        <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
        <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
        <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
    </body>
</html>

bodyこれは、 が を持っていることを前提としてmarginいます0。それ以外の場合は、に上下の余白を追加する必要があります$('body').height()。

于 2010-05-04T20:10:33.730 に答える
8

以下を使用できます。

$(window).scroll(function() {
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
        //Bottom Reached
    }
});

私が持っているのでこれを使用します

body {
    height:100%;
}

お役に立てれば

于 2013-03-21T20:17:05.877 に答える
3

javascriptポップアップではなくdivを表示したい場合は、BalusCのコードを少し編集します。

<head>
    <title>SO question 2768264</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
                    $("#hi").css("display","block");
                }else {
                    $("#hi").css("display","none");
                }
            });
        });
    </script>
    <style>
        body { margin: 0; }
        #hi {
          background: red; color: #FFF; position: fixed; bottom: 0px; right: 0px; display: none;
        }


    </style>
</head>
<body>
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p

    <div id="hi">HIIIIIIIIIIII</div>
</body>
于 2012-03-20T03:18:21.297 に答える
2

$(ドキュメント)。scrollTop () は、スクロールバーの位置を示します。ドキュメントの高さに対してそれをチェックします。次に、div をフェードインまたはフェードアウトします。

于 2010-05-04T19:52:16.043 に答える