3
Я нашел код, который я хотел использовать, чтобы создать статическую навигационную панель, которая находится в верхней части экрана при прокрутке вниз. Эта часть отработала отлично.Фиксированная навигационная панель не будет прокручиваться вправо с остальной страницы
Однако, когда я изменяю размер окна браузера, сначала он переносится на следующую строку. Поэтому я добавил белое пространство: 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
}
Я добавил контент в html, чтобы пример был более очевидным. Теперь, когда страница изменяется горизонтально на менее чем 800 пикселей, страница (содержимое, текст и т. Д.) Будет иметь полосу прокрутки, но в определенный момент фиксированный заголовок просто отключается. Любые советы по тому, как заголовок будет прокручиваться вместе с остальной частью страницы? – user2488073