Question

我有这个可以滚动内容的容器。我希望这个容器中的标题始终保持在顶部。

容器：

.lists {
    width: 300px;
    height: 250px;  
    margin: 30px auto;
    background: #39C;
    overflow: scroll;
    position: relative;
}

部首：

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: absolute;
    margin: 0;
    background: #DDD;
    z-index: 999;
}

Answer 1

如果您需要非css修复，请添加此侦听器...

$('.lists').scroll(function() {
    $('.box_header', this).css('top', $(this).scrollTop()+'px');
});

然后更改.lists css以提供相对定位

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: relative;
    margin: 0;
    background: #DDD;
    z-index: 999;
}

Answer 2

如果你愿意改变你的标记，这是一种方法：

<div class="lists">
    <header class="box_header">
        <h1>HEADER 2</h1>
        <div class="setting" id="btn2"></div>
    </header>
    <section class="content">
        <p>Lorem Ipsum ....</p>
    </section>
</div>

将您的滚动区域包裹在<section>（或其他块级元素）中。

对于你的CSS：

.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}

请参阅小提琴：http://jsfiddle.net/audetwebdesign/nGGXx/

更多高级示例

如果您学习以下示例：

http://jsfiddle.net/audetwebdesign/fBNTP/

您可以看到如何在半柔性布局中应用滚动框。我并排排列了两个滚动的盒子，使它们的宽度与页面的宽度成比例。

调整高度比较棘手。我修复了父容器的高度，请参阅以下规则：

.contentWrapper {
    border: 1px solid red;
    margin-top: 1.00em;
    padding: 30px 0;
    overflow: auto;
    height: 400px;
}

如果您将高度从400px更改为其他值，则滚动框将自行调整。

希望这些示例能够为您和其他人提供有关如何构建这些更高级布局设计的更多见解。

Answer 3

位置相对内的任何绝对位置对于相对容器是绝对的。为了使标题保持在适当位置，您需要将其放置在滚动容器的上方，而不是位于其中。

Answer 4

看看添加位置：固定到你的标题div .box_header。您可能必须将box标题div的高度填充添加到section.content，但是因为您设置为30px应该没问题。 IE6及更低版本存在固定定位的问题，但希望我们现在可以忍受这种问题 - 使用它的人少于使用Moby。

CSS - 标题保持在容器的顶部

4 个答案: