所以我有一个 html 页面和一个固定的图像作为我的标题，但我还想在下面有一个固定的导航栏，在那里我可以有链接到我服务器上另一个页面的按钮
这是我的代码
<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
@media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png" width="1700" height="46" alt="logo"<br>
<p>
<table>
<tr>
<td bgcolor= "black"><a href="http://192.168.0.143" color="cyan"style="text-decoration: none">Server Index</a> <a href="http://192.168.0.143/chat.html" style="text-decoration: none">Chat Room</a></td>
</tr>
</table>
</p><br>
</div>
最佳答案
如果您想固定与视口(viewport)相关的元素，那么 CSS position: fixed属性(property)才是正道。
这可能是您想要做的:http://jsfiddle.net/hh1kuxyh/
当您上下滚动时，您会注意到标题和导航栏保持不变。
HTML
<div id="container">
<div id="header"><h2>HEADER IMAGE</h2></div>
<div id="navbar"><span>NAVIGATION MENU</span></div>
</div>
<div id="main-content">
<p>lots of text here</p>
</div><!-- end #main-content -->
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 98%;
height: 230px;
position: fixed;
top: 0;
}
#header {
height: 150px;
background-color: chartreuse;
text-align: center;
}
#header h2 {
padding-top: 25px;
}
#navbar {
height: 75px;
background-color: #aaa;
text-align: center;
border: 2px solid black;
}
#navbar span {
line-height: 75px;
font-weight: bold;
}
#main-content {
margin-top: 235px;
}
如果你想固定一个元素相对于另一个元素，那么你可能需要使用一些jQuery。 http://jsfiddle.net/8086p69z/8/
另见我的两个答案:
最后，我尝试使用您的代码，但它包含许多错误。例如，您的代码块缺少 <html> , <body>和 <head>元素。
始终通过 W3C Mark-Up Validation Service 运行您的代码检查错误和标准合规性。
希望这对您有所帮助。祝你好运!
关于javascript - 固定标题下方的固定导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31899909/