如何保持标题不动，滚动时始终在顶部？
如何保持标题不动，滚动时始终在顶部？
提问于 2010-08-29 13:05:24
我该如何防止我的header与页面的其余部分一起滚动？我想过使用frame-sets和iframes，只是想知道是否有一种更简单、更用户友好的方式，做这件事的最佳实践是什么？
回答 7
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用户
发布于 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用户
发布于 2014-09-08 12:35:38
如果你可以使用bootstrap3，那么你可以使用css "navbar-fixed-top“，你还需要添加下面的css来向下推你的页面内容。
body{
margin-top:100px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3593594
复制相关文章
相似问题