如何保持标题不动，滚动时始终在顶部？
如何保持标题不动，滚动时始终在顶部？
提问于 2010-08-29 13:05:24
我该如何防止我的header与页面的其余部分一起滚动？我想过使用frame-sets和iframes，只是想知道是否有一种更简单、更用户友好的方式，做这件事的最佳实践是什么？
回答 8
Stack Overflow用户
回答已采纳
发布于 2010-08-29 13:07:11
注:此答案可追溯至2010年。考虑一下another answer中提到的2021年的position: sticky。
在包含标头的div上使用position: fixed，如下所示
#header {
position: fixed;
}
#content {
margin-top: 100px;
}在此示例中，当#content从低于#header的100px开始时，但当用户滚动时，#header保持不变。当然，不用说，您需要确保#header有一个背景，这样当两个div重叠时，它的内容实际上是可见的。在这里查看position属性：http://reference.sitepoint.com/css/position
Stack Overflow用户
发布于 2019-10-31 22:41:02
position: sticky;
在modern, supported browsers中，你可以简单地用CSS做这件事-
header {
position: sticky;
top: 0;
}在大多数情况下，它比使用position: fixed更好，因为position: fixed将元素从常规的元素流中去掉。
便笺
在使用position: sticky时，
- 结构很重要，因为它会使元素相对于父元素变得粘性。粘性定位可能不适用于在父级中设置粘性的单个元素。
- 粘性元素的父级不应设置
overflow属性，例如:如果父级具有overflow: auto或overflow: hidden，则粘性定位可能不起作用 - 至少提供
top、bottom、D19、right中的一个很重要，因为它会使元素相对于某些位置粘滞。
运行下面的代码片段以检查示例实现。
main{
padding: 0;
}
header{
position: sticky;
top:0;
padding:40px;
background: lightblue;
text-align: center;
}
content > div {
height: 50px;
}<main>
<header>
This is my header
</header>
<content>
<div>Some content 1</div>
<div>Some content 2</div>
<div>Some content 3</div>
<div>Some content 4</div>
<div>Some content 5</div>
<div>Some content 6</div>
<div>Some content 7</div>
<div>Some content 8</div>
</content>
</main>
Stack Overflow用户
发布于 2012-04-28 12:31:11
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 88px;
z-index: 10;
background: #eeeeee;
-webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
}
.header__content-text {
text-align: center;
padding: 15px 20px;
}
.page__content-container {
margin: 100px auto;
width: 975px;
padding: 30px;
}<div class="header">
<h1 class="header__content-text">
Header content will come here
</h1>
</div>
<div class="page__content-container">
<div style="height:600px;">
<a href="http://imgur.com/k9hz3">
<img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" />
</a>
</div>
<div style="height:600px;">
<a href="http://imgur.com/TXuFQ">
<img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" />
</a>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3593594
复制相关文章
相似问题
腾讯云开发者
