Question

我找到了一些代码，我想用它来制作一个静态导航栏，当你向下滚动时它会停留在屏幕的顶部。那部分工作得很好。

然而，当我调整浏览器窗口的大小时，首先它将换行到下一行。所以我添加了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（向页面内容添加80px的上边距）：

#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
}

Answer 1

您需要添加溢出并在css中将其设置为自动。

#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;
}

Answer 2

您需要特定于要滚动的溢出，在这种情况下，您需要overflow-y：auto;

固定导航栏不会在页面的其余部分向右滚动

2 个答案: