Html 使一个 div 粘在另一个绝对定位的溢出滚动 div 的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19743570/
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
Make a div stick to the top of another absolutely positioned overflow scrolled div
提问by Alireza
Here is the thing, there is a div .pagewhich is absolutely positioned at tha page. Inside, there is a .containerdiv and within the container there are the .contents.
事情是这样的，有一个 div.page绝对定位在那个页面上。在里面，有一个.containerdiv，在容器内有.contents。
The .pagehas certain heigth, so, contents would be scrolled inside the .page. In this situation I want a .stuckdiv to stick to the top of the .page. ( I am sure I made grammatical mistakes above!)
将.page具有一定的heigth，因此，内容将里面的滚动.page。在这种情况下，我希望.stuckdiv 粘在.page. （我确定我在上面犯了语法错误！）
Anyway, the fiddel:
无论如何，小提琴：
update:I want the .stuckto be fixed at the top of .pageregardless of the scroll on the .page.
更新：我想.stuck在顶部的固定.page，无论在滚动的.page。
this is the layout:
这是布局：
<div class="page">
<div class="container">
<div class="content"></div>
<div class="stuck"></div>
</div>
</div>
and my (not working) css:
和我的（不工作）css：
.page{
position: absolute;
top:50px;
left:200px;
width:200px;
height:300px;
overflow:auto;
}
.container{
position:relative;
}
.stuck{
position: absolute;
top:0;
right:0;
left:0;
height:50px;
background:blue;
}
.content{
height:700px;
background:gray;
}
I want the blue .stuckdiv always be thereat the top of the .pagediv. Any help?
我希望蓝色.stuckdiv始终位于.pagediv的顶部。有什么帮助吗？
update:note: a quick trick might be to make the .stuckbe positions:fixedand the same position and width of the .page, but that is not my answere since the coordinates of the .pagemight change with JS any time.
更新：注：一个快速的把戏可能使.stuck是positions:fixed的和相同的位置和宽度.page，但不是因为坐标我的answere.page与JS可能会改变的任何时间。
采纳答案by James Montagne
You can add .pageand .stuckto a common parent element and overlay the one over the other.
您可以将.page和添加.stuck到一个公共父元素，并将一个元素覆盖在另一个元素上。
.page_holder{
position: absolute;
top:50px;
left:200px;
width:200px;
height:300px;
}
.page {
position: absolute;
top:0;
left:0;
width:200px;
height:300px;
overflow:auto;
z-index: 1;
}
.container {
position:relative;
}
.stuck {
position: absolute;
top:0;
right:0;
left:0;
height:50px;
background:blue;
margin-right: 18px;
z-index: 2;
}
.content {
height:700px;
background:gray;
} <div class="page_holder">
<div class="stuck"></div>
<div class="page">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>回答by Roko C. Buljan
since the coordinates of the .page might change with JS any time.
因为 .page 的坐标可能随时随 JS 改变。
...so you already use JS! :)
...所以你已经在使用 JS 了！:)
Using this exact HTML markup is not possible
For such cases we always have Javascript and jQuery: JSBIN DEMO
使用这种精确的 HTML 标记是不可能的
对于这种情况，我们总是有 Javascript 和 jQuery：JSBIN DEMO
$('.stuck').each(function(){
var $that = $(this),
$page = $that.closest('.page');
$page.scroll(function(){
$that.css({top: this.scrollTop});
});
});
