当用户滑动到页面底部时如何显示div？

Question

当用户滑动到页面底部时如何显示div？

jqueryfadeinviewport

9

当用户滚动到页面底部时，我想使用jQuery显示某些div。如果用户向顶部滚动，则淡出div。那么如何计算视口（或者正确的名称是什么）：）

谢谢

- Kenan

你是在说一个具有position:fixed;属性的div，还是一个仅位于内容底部的div？ - codedude

它将固定在页面底部，可能是“bottom:50px”。 - Kenan

4个回答

8

您可以使用以下内容：

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

我使用这个是因为我需要

body {
    height:100%;
}

希望这能有所帮助。

- David Passmore

谢谢，我正好处于同样的情况。你的解决方案对我很有帮助！ - Adrien

@Adrien 朋友，不用谢。很高兴我能帮到你 :) - David Passmore

3

如果您想显示一个div而不是JavaScript弹出窗口，这里对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>

- Hossam Mourad

嗨。假设我使用的是div ID而不是“body”，如果我想让“hi”在滚动div的80％处出现，该怎么办？ :) 点赞会支付一个好答案 :) - user621639

2

$(document).scrollTop()可以获得滚动条的位置。您可以将其与文档高度进行比较，然后淡入或淡出div。

- Funky Dude

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

这将帮助你入门：

<!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。否则，你需要将上下 margin 添加到 $('body').height() 中。