滚动时 HTML 固定标题栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24878582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML fixed header bar when scroll
提问by Eric Tseng
I've written an example here
我在这里写了一个例子
I want a header bar on the top of the page.
我想要页面顶部的标题栏。
<p style="vertical-align: middle; color: white">Head Bar</p>
And when user scrolls down and up, the header bar will always be on the top.
当用户向下和向上滚动时，标题栏将始终位于顶部。
But now it has an issue that the bottom of the page will be cut-off.
但是现在它有一个问题，即页面底部将被切断。
Just like the example above, the
就像上面的例子一样，
"Title 3",
“标题3”，
"Content 3.",
"内容 3.",
"Author: Alex"
“作者：亚历克斯”
will be cut-off.
将被切断。
Anyone has any ideas about this issue?
有人对这个问题有任何想法吗？
Thanks in advance.
提前致谢。
Eric
埃里克
回答by Dimas Pante
回答by Edward
You should set your header bar to position: fixedinstead.
您应该将标题栏设置为position: fixed。
Example:
例子：
div.header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
if you are concerned about the top of .home being cut off, you can also add a margin-top
如果您担心 .home 的顶部被切断，您还可以添加一个 margin-top
