How to show div when user reach bottom of the page?

前端未结

关注

 4  1700

When user scrolls to the bottom of the page I want to show some div, with jQuery of course. And if user scrolls back to he top, div fade out. So how to calculate viewport (o

相关标签:

4条回答

孤街浪徒

2020-12-06 18:20

This must get you started:

<!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>

This assumes that body has a margin of 0. Else you'll need to add the top and bottom margin to the $('body').height().

0 讨论(0)

甜味超标

2020-12-06 18:24

You can use the following:

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

I use this because i have

body {
    height:100%;
}

Hope this helps

0 讨论(0)

广开言路

2020-12-06 18:37

$(document).scrollTop() should give you the position of scrollbar. you check that against document height. then fade in or out the div.

0 讨论(0)
发布评论:

提交评论
- 加载中...

情书的邮戳

2020-12-06 18:43

Here's a small edit on the BalusC's code if you want to show a div not a javascript popup:

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

0 讨论(0)