滚动时HTML固定标题栏

时间:2014-07-22 03:50:02

标签: html css css-position

我在这里写了一个例子

http://jsfiddle.net/R9Lds/

我想在页面顶部添加标题栏。

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

当用户向下和向上滚动时,标题栏将始终位于顶部。

但现在有一个问题是页面底部会被切断。

就像上面的例子一样,

&#34; Title 3&#34;,

&#34;内容3。&#34;,

&#34;作者:Alex&#34;

将被截止。

有人对这个问题有任何想法吗?

提前致谢。

埃里克

2 个答案:

答案 0 :(得分:11)

你实际上可以比这更简单。您只需要将标题div设置为position: fixed,将“推送”div设置为,以便...将内容向下推。

看看这个Fiddle

答案 1 :(得分:2)

您应该将标题栏设置为position: fixed

示例:

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

如果你担心.home的顶部会被切断,你也可以添加一个margin-top

http://jsfiddle.net/R9Lds/1/