Javascript 如何在带有滚动条的div中制作固定框?
我怎样才能使一个盒子用卷轴固定在一个div中 我试着这样做: HTML: 但是,框将与页面一起运行,而不仅仅是在div中 我做错了什么???有人能给我指路吗 谢谢你们Javascript 如何在带有滚动条的div中制作固定框?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我怎样才能使一个盒子用卷轴固定在一个div中 我试着这样做: HTML: 但是,框将与页面一起运行,而不仅仅是在div中 我做错了什么???有人能给我指路吗 谢谢你们 编辑 示例->尝试摆脱“位置:固定'并添加此'溢出:滚动' 编辑 更改了JSFIDLE,已更新。您不能使用位置:已修复,因为它始终与视口关联。您希望在其上下文中修复它 当container3滚动时,黑框保持在原位 <div id="wrapper"> <div class="main">
编辑
示例->尝试摆脱“
位置:固定代码>'并添加此'溢出:滚动代码>'
编辑
更改了JSFIDLE,已更新。您不能使用位置:已修复
,因为它始终与视口关联。您希望在其上下文中修复它
当container3
滚动时,黑框保持在原位
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="container3"></div>
</div>
<div class="test"></div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.container {
position: relative;
height: 500px;
padding-top: 200px;
}
.container2 {
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container3 {
height: 1500px;
}
.test {
width: 500px;
height: 500px;
bottom: 0;
background-color: #000000;
position: absolute;
}
#包装纸{
位置:相对位置;
宽度:100%;
身高:100%;
}
梅因先生{
宽度:100%;
身高:100%;
}
.集装箱{
位置:相对位置;
高度:500px;
填充顶部:200px;
}
.集装箱2{
高度:500px;
保证金:0自动;
溢出:滚动;
}
.集装箱3{
高度:1500px;
}
.测试{
宽度:500px;
高度:500px;
底部:0;
背景色:#000000;
位置:绝对位置;
}
试试这个解决方案
我添加了一个div
,它将容器div
和class='test'
div
包装在同一个级别上,因此测试div可以在包装器中是绝对的,并且始终处于固定位置
<div id="wrapper">
<div class="main">
<div class="scroll-container">
<div class="container">
<div class="container2">
</div>
</div>
<div class="test">Fixed inside scroll container</div>
</div>
</div>
</div>
当然,请做一个简单的回答!我不确定我是否完全理解。滚动时是否希望框保持在完全相同的位置,或者滚动时是否希望框保持在相同的位置?能否解释这是一种解决方案?元素不固定。对不起,@Halcyon。重读这个问题。更好吗?这样做,有一个小问题:test
在container
之前呈现,因此任何内容都将显示在固定的div上。如果将test
div移动到container之后(或给它一个z索引),它将正确地流动。多亏您说得对,文本是重叠的,我把你建议的修改添加到我的答案中
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="container3"></div>
</div>
<div class="test"></div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.container {
position: relative;
height: 500px;
padding-top: 200px;
}
.container2 {
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container3 {
height: 1500px;
}
.test {
width: 500px;
height: 500px;
bottom: 0;
background-color: #000000;
position: absolute;
}
<div id="wrapper">
<div class="main">
<div class="scroll-container">
<div class="container">
<div class="container2">
</div>
</div>
<div class="test">Fixed inside scroll container</div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.scroll-container{
position: relative;
height: 500px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 200px;
color: white;
position: absolute;
top:0;
left: 50%;
margin-left: -250px;
background: black;
z-index: 1;
}