滚动时固定HTML页眉栏

Question

我在这里写了一个例子

http://jsfiddle.net/R9Lds/

我想在页面顶部有一个标题栏。

<p style="vertical-align: middle; color: white">Head Bar</p>

当用户下拉或上滑页面时，标题栏将始终位于页面顶部。但是现在存在一个问题，即页面底部会被截断。就像上面的示例一样，“Title 3”，“Content 3.”，“Author: Alex”将被截断。有人对此问题有任何想法吗？提前感谢。 - Eric

- Eric Tseng

---

你发布的代码有点混乱。我会在网上搜寻一些模板示例，然后从那里开始。 - Joshua

Answer 1

你其实可以更简单地实现这个效果。你只需要把头部的 <div> 设置为 position: fixed，再用一个“推送” <div> 把内容往下推。

可以参考这个 Fiddle 示例。

- Dimas Pante

---

我稍微修改了一下，这样你就不必重复偏移大小。这会违反任何规则吗？或者它是减少“30px”重复的有效方法吗？ - user1717828

不错，这绝对是更好的 DRY 实践 :) - Dimas Pante

Answer 2

你应该将头部栏设置为 position: fixed。

示例：

div.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

如果你关心首页的顶部被截断了，你也可以添加一个 margin-top。 http://jsfiddle.net/R9Lds/1/

- Edward