javascript 将 DIV 固定在可滚动 DIV 中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6215883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:55:24  来源:igfitidea点击:

Make DIV fixed inside a scrollable DIV

javascripthtml

提问by williamtroup

Does anyone now how to make a DIV inside another DIV that is scroll-able fixed, so that no matter how much I scroll by, the DIV always stays in the same place?

现在有没有人如何在另一个可滚动固定的 DIV 中制作 DIV,这样无论我滚动多少,DIV 始终保持在同一个位置?

Any help would be greatly appreciated.

任何帮助将不胜感激。

采纳答案by Fredrik

Try this out:

试试这个:

<style type="text/css">
    .scrollable {
        width: 200px;
        height: 200px;
        background: #333;
        overflow: scroll;
    }
    .fixed {
        position: absolute;
        top: 180px;
        width: 200px;
        height: 20px;
        background: #fa2;
    }
</style>
<div class="scrollable">
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    <div class="fixed">and I'm fixed</div>
</div>

回答by zzzzBov

I would recommend absolutely positioning the div overthe scrollable div. It wont be inthe scrollable div, because it doesn't need to be.

我会建议在div绝对定位滚动股利。它不会可滚动的 div 中,因为它不需要。

回答by Mikulasche

Fixed div in scrollable div

修复了可滚动 div 中的 div

#container {
position:absolute;
top:150px;
left:150px;
width:600px;
height:500px;
overflow:hidden;
border:3px dashed #ffff00;
padding:0px;
}

#this_scroll {
position:absolute;
top:0px;
right:0px;
width:99%;
height:99%;
overflow:scroll;
border:2px solid #000;
margin:1px;
background:#B0BDCE;
}

#fix_close {
position:absolute;
top:2px;
right:21px;
width:90px;
height:30px;
overflow:hidden;
border:2px solid #660099;
z-index:10;
background:#8C8C8C;
}


<div id="container">

    <div id="this_scroll">
    <p>some yxyxyx</p><p>some yxyxyx</p>
    </div>

    <div id="fix_close">
        close
    </div>

</div>