我试图让我的粘性导航栏跨越所有设备的页面宽度。它适用于计算机屏幕，但一旦窗口收缩得足够大，它就会大大搞砸了。然而，无论观看屏幕的宽度如何，它上方的徽标都能完美地缩放。我尝试使用它的属性，虽然它似乎没有改变导航栏上的输出。
我还尝试使用@media将宽度强制为整个窗口的70％。相反，它只影响计算机窗口。我使用max-width并将其设置为1200像素。它似乎并没有做任何事情。我甚至尝试添加溢出：隐藏以防止可能的大小调整，如果有任何东西逃脱了界限。
问题在于，一旦窗口足够小，它就会将导航栏中的文本更改为添加额外行的位置。然后很快，在定心停止工作后，它会自动离开屏幕。
这是一个混乱的JSFiddle：https://jsfiddle.net/Shadowfang/Lc5Ljaf4/
更新：L L给我留下了一些我用来改变我的JSFiddle的代码。它解决了导航栏在屏幕外消失的问题。它也可以完美地调整大小，直到你不能再缩小窗口。但是我仍然需要进行一些编辑来修复整体外观，并将菜单返回到水平。这是新的：https://jsfiddle.net/Shadowfang/Lc5Ljaf4/13/
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" media="screen, projection" href="style.css">
<script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type ="text/javascript" src="script.js"></script>
</head>
<body>
<!-- It would be nice to know if tables are what's throwing off my entire website or not... but whatever. -->
<div class="status"></div>
<div class="logo"><!--I'll change the word "container" to Logo perhaps in the future here if I can get this example to work for once. Also let it be noted that I am in fact not using the "header" tag at any portion during this... which is bothersome. -->
<center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="100%" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a></center>
</div>
<div class ="navigation">
<!-- The navigation portion... dear God... here is where it all usually goes wrong. -->
<nav>
<ul class="clearfix"> <!-- Clearfix?! Really?! I'm ASSUREDLY changing that one. -->
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav><!-- End the hiddeously named section... and hopefully begin progress towards a complete page... -->
</div>
<div class ="logo2">
</div>
<div class ="content">
<br/><br/>
<center><h2>THIS WEBSITE IS UNDER CONSTRUCTION!!! TAKE NOTHING HERE YOU SEE SERIOUSLY FOR THE TIME BEING!!!</h2></center> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? -->
<br/>
<br/>
<p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations based on them -->The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
</div>
CSS：
html {
padding: 0;
margin: 0;
background-color: #000;
}
body {
font-family: Helvetica, sans-serif;
font-size: 93%;
line-height: 1.5em;
padding: 40px 0;
margin: 0;
color: #7d0000;
}
a,
a:link,
a:visited {
color: blue;
}
h1, h2, h3, h4, h5, h6 {margin-top: 0;}
p {margin: 0 0 1em 0;}
.logo {
max-width: 940px;
margin: 0 auto;
padding: 0 20px;
}
.navigation {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.logo2 {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.content {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
h1 {
background-color: #305782;
color: #FFF;
padding: 60px 25px;
margin: 0;
}
nav {
z-index: 500;
background-color: #000;
}
.nav-placeholder {
margin: 0 0 40px 0;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000;
}
.fixed .nav-inner {
padding: 0 20px;
}
.fixed .nav-inner-most {
max-width: 100%;
margin: 0 auto;
background-color: #000;
}
nav ul {
display: table;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: table-cell;
text-align: center;
}
nav ul li a:link,
nav ul li a:visited {
display: block;
text-decoration: none;
padding: 10px 25px;
background-color: #000;
border: 2px solid #7d0000;
color: #7d0000;
font-size: 90%;
font-weight: bold;
}
nav ul li a:hover {
background-color: #28bfa1;
color: #FFF
}
@media (min-width: 1200px) {
.container{
max-width: 70%;
}
}
/* This seems to have an undesired effect, but may be necessary for later.
The border-right: none; attribute is especially annoying...
nav ul li:last-child a:link,
nav ul li:last-child a:visited {
border-right: none;
}
*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JS：
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery("nav").wrapInner('<div class="nav-inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}
});
});
提前谢谢你，
影牙
答案 0 :(得分：1)
正如你在小提琴的评论中所提到的那样，表格确实是扔掉你网站的东西，或至少这部分代码：
nav ul li {
display: table-cell;
text-align: center;
}
例如，您应该将显示更改为内联块。您将立即获得更多响应行为，并且屏幕上不会有任何消失。它需要一些额外的css更改才能使其看起来很好，比如删除菜单中li元素内部元素的填充。随着屏幕缩小，屏幕上的菜单项现在将跳转到新行。如果要避免这种情况，可以设置固定宽度（％）。看看你的代码让我觉得这应该足以让你走了，让我知道这是否有帮助。