如何保持标题静态,滚动时总是在顶部？

Question

我如何保持自己header不与页面的其余部分滚动？我想过利用,frame-sets并且iframes只是想知道是否有更简单,更友好的方式,这样做的最佳做法是什么？

Answer 1

使用position: fixed的div包含您的头,喜欢的东西

#header {
  position: fixed;
}

#content {
  margin-top: 100px;
}

在此示例中,当#content从下方100px开始时#header,但在用户滚动时,#header保持原位.当然,毫无疑问,你需要确保#header有一个背景,以便当两者div重叠时,它的内容实际上是可见的.在position这里查看房产:http://reference.sitepoint.com/css/position

Answer 2

position: sticky;

在现代支持的浏览器中，您可以简单地在 CSS 中使用 -

header {
  position: sticky;
  top: 0;
}

在大多数情况下，它比使用更好position: fixed，因为position: fixed将元素从元素的常规流中取出。

注意：

1. HTML 结构在使用时很重要position: sticky，因为它使元素相对于父元素具有粘性。并且粘性定位可能不适用于在父级中粘性的单个元素。
2. 被设置为粘性的元素的父级不应overflow设置属性 例如：如果父级具有overflow: auto或overflow: hidden，则粘性定位可能不起作用
3. 给人的至少一个top，bottom，left，right是重要的，因为它使得相对于一些位置的元素粘性。

运行下面的代码片段以检查示例实现。

header {
  position: sticky;
  top: 0;
}

main{
padding: 0;
}
header{
position: sticky;
top:0;
padding:40px;
background: lightblue;
text-align: center;
}

content > div {
height: 50px;
}

Answer 3

这是DEMO

HTML:

.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;
}

CSS:

<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>

Answer 4

如果可以使用bootstrap3，则可以使用CSS“ navbar-fixed-top”，还需要在CSS下方添加以将页面内容下移

body{

   margin-top:100px;
}