我找到了一些我想用来制作静态导航栏的代码，当您向下滚动时它会停留在屏幕顶部。那部分效果很好。
但是，当我调整浏览器窗口大小时，起初它会换行到下一行。所以我添加了 white-space:nowrap 以便它保持在一行中。但是现在，如果我调整窗口大小，它只会切断浏览器窗口边缘的导航栏。
我希望页面向右/向左滚动，而不仅仅是导航栏下的滚动条。我该怎么做？
提前致谢。这就是我正在使用的:http://jsfiddle.net/TYgSx/14/embedded/result/
这是 HTML(已编辑以添加页面内容):
<html>
<body>
<div id="nav">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non elit turpis. Nulla non dolor non magna pellentesque iaculis a vel dolor. Nunc vel est elementum, faucibus magna ut, iaculis tellus. Praesent euismod pharetra mauris non adipiscing. Proin venenatis nunc id neque tincidunt, sit amet consectetur sapien pellentesque. Morbi sit amet tincidunt odio, eget rhoncus velit. Proin mollis luctus molestie. Suspendisse facilisis ligula sed posuere dapibus. Integer mauris risus, bibendum a lacus vel, sollicitudin varius lacus. Maecenas vitae pharetra quam, quis blandit tortor. Cras adipiscing laoreet pulvinar. Ut lacus erat, lobortis vel auctor id, ullamcorper quis nisi. In tempor lacus non urna mattis, sed suscipit nisi varius. Aliquam at turpis in justo pellentesque lacinia in vitae odio.</p>
<p>Integer fringilla eros quis risus rhoncus tempus. Nunc aliquet magna blandit turpis suscipit lacinia. Aenean laoreet varius velit a aliquam. Proin tincidunt dolor et velit egestas semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium sodales ornare. Sed at tellus sit amet libero imperdiet dapibus. Fusce ultricies enim sit amet neque sodales porttitor.</p>
<p>Duis dignissim massa id ultrices consequat. Phasellus libero est, posuere quis orci non, lobortis sodales nisl. Maecenas fermentum, nisl at elementum lobortis, nisi dui dictum risus, pharetra aliquet ante elit non justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec porttitor pellentesque libero id volutpat. Aenean tempus sapien nunc, quis hendrerit lectus gravida volutpat. Suspendisse potenti. Pellentesque posuere diam in pulvinar ultrices.</p>
<p>Donec vitae diam erat. Aenean volutpat fringilla hendrerit. Sed quis ornare erat. Vivamus sit amet augue lacinia, rhoncus erat a, ultrices eros. Proin eget facilisis tellus. Sed eleifend porttitor orci vitae aliquet. Aliquam aliquam tristique nisl vitae laoreet. Morbi ac luctus ipsum, a molestie nulla. Vivamus at erat at dui fermentum vestibulum. Pellentesque vulputate in lacus eget ultrices. In imperdiet nisl non vehicula congue. Maecenas mattis semper enim. Duis consectetur sapien ac enim pellentesque mattis. Phasellus molestie vitae ipsum nec facilisis.</p>
<p>Integer lobortis a felis non pellentesque. In sit amet sagittis lacus, vel aliquam urna. Phasellus sodales erat quis ante aliquam interdum. Ut vitae dolor diam. Nullam nisi felis, euismod ac nunc eget, fringilla pretium nisi. Proin commodo vestibulum elit eget luctus. Pellentesque nisi felis, congue in sem in, elementum ultricies metus. Vivamus mollis nisi non ante imperdiet, nec posuere dui aliquam. Ut rhoncus risus in malesuada accumsan. In vestibulum auctor diam, sit amet vestibulum mauris. Praesent eu nibh lorem. Suspendisse turpis libero, sollicitudin vitae lacinia et, volutpat et tortor. Aliquam vitae ultrices ante. Ut commodo vitae est sit amet bibendum.</p>
</body>
</html>
CSS(为页面内容添加了 80 像素的上边距):
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
left:0px;
white-space:nowrap;
}
#navigation
{
list-style-type:none;
}
li
{
display:inline;
padding:10px;
}
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover
{
color:#BDBDBD;
}
h1
{
margin-top:80px;
}
body
{
min-width:800px
}
最佳答案
您需要添加 overflow 并在您的 css 中将其设置为 auto。
#nav {
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
**overflow: auto;**
top:0px;
left:0px;
white-space:nowrap;
}
关于html - 固定导航栏不会随着页面的其余部分向右滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17119945/