如何让div固定在页面随着滚动条滚动

答案:1 悬赏:20 手机版

解决时间 2021-03-19 18:28

提问者网友：温柔港
2021-03-19 05:04

如何让div固定在页面随着滚动条滚动

最佳答案

五星知识达人网友：杯酒困英雄
2021-03-19 05:41

利用JavaScript脚本，从浏览器中获取各个关于位置的参数，然后将其计算后，定位在窗体的右下角。可以承认，这个方法确实是比较自然的想法，也是很常见的方法，但是这样的方法有以下几个缺点：

1. 使用了大量的计算，每次滚动，都少不了一大堆的运算。
2. 使用了JavaScript脚本，脚本这东西受到浏览器的限制，即便没有限制，也同样因为网页的下载模式问题，可能因为脚本下载未完成或者下载失败而致使脚本无法正确运行。
3. 条条大路通罗马，但是看看那方块，当快速滚动滚动条的时候，会发现那个可爱的方块抖动地厉害。这也难怪，那么多的计算谁能受得了？
那有没有比较“平静”高效的表示方式呢？答案是有。
<html>

<head>

    <title></title>

    <style type="text/css">

        html,body {

            overflow:hidden;

            margin:0px;

            width:100%;

            height:100%;

        }

        .virtual_body {

            width:100%;

            height:100%;

            overflow-y:scroll;

            overflow-x:auto;

        }

        .fixed_div {

            position:absolute;

            z-index:2008;

            bottom:20px;

            left:40px;

            width:800px;

            height:40px;

            border:1px solid red;

            background:#e5e5e5;

        }

    </style>

</head>

<body>

<div class="fixed_div">I am still here!</div>

<div class="virtual_body">

    <div style="height:888px;">

        I am content !

    </div>

</div>

</body>

</html>分析：
html,body：将默认可能会随机出现的滚动条，完全地隐藏了，这样不管您放了啥内容，它们都不会出来了。
.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了所有可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。
.fixed_div：这下它可以利用绝对值进行定位了，因为在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就可以自认为是在某个点蹲坑了，绝对安全。
想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！