在 HTML 滚动后的网页上创建静态工具栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2815699/
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
Create static toolbar on webpage that follows scroll in HTML
提问by Mark Szymanski
How do you make a toolbar like object in HTML that follows the user's scroll so that it is always at the top of the viewable page?
你如何在 HTML 中创建一个像对象一样的工具栏，跟随用户的滚动，以便它始终位于可查看页面的顶部？
Thanks in advance!
提前致谢！
回答by Gabriel
css
css
.selector
{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
html
html
<div class="selector">
... content for bar here ...
</div>
回答by Marko
Do you specifically need it to scroll (animate) or just a static (toolbar like) object?
您是否特别需要它来滚动（动画）或只是一个静态（类似工具栏的）对象？
EDIT:
编辑：
Ok so to add a static(toolbar like) object that has a width which is 100% of the page, and a height of say 25px, you would do this.
好的，添加一个静态（类似工具栏）对象，其宽度为页面的 100%，高度为 25px，您可以这样做。
HTML
HTML
<div id="toolbar">
<p>Some content...</p>
</div>
CSS
CSS
#toolbar {
position: fixed;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
background: #ccc; /* some styling */
border-bottom: 1px solid #333; /* some styling */
}
Please note that this might overlap any content that you have at the top of the page, so use a top margin to push it down under the toolbar or simply set:
请注意，这可能会与页面顶部的任何内容重叠，因此请使用上边距将其向下推到工具栏下方或只需设置：
body {
margin-top: 35px;
}
