html - 粘性标题滚动 + 窗口大小

Question

您好，我按照代码审查片段在我正在稳步构建的网站中实现。

我已经找到了如何让它粘在底部，并在向下滚动时粘在顶部。但是当它显示在底部时，它并没有完全显示导航。HTML 代码:

<div class="header">
<nav id="main-navigation">
<ul>
  <li><a href="/archive">Archive</a></li>
  <li><a href="/events">Events</a></li>
  <li><a href="/contact">Contact</a></li>
<ul>
</nav>
</header>

JQUERY 脚本:

<script type="text/javascript">
var $window = $(window);
var nav = $('#main-navigation');
$window.scroll(function(){
if ($window.scrollTop() >= 300) {
   nav.addClass('fixed-header');
}
else {
   nav.removeClass('fixed-header');
}
});</script>

CSS 片段:

header{position:fixed;bottom:0;z-index:999999;}
.fixed{
position: absolute;
bottom:0; left:0;
width: 100%;
z-index:900; }
.fixed-header {
position: fixed;
top:0px; left:0;
width: 100%; 
}

nav {
width:100%;
height:60px;
background: #292f36;
postion:fixed;
z-index:100;
bottom:0px;
}

nav ul { 
list-style-type: none;
margin: 0 auto;
padding-left:0;
text-align:right;
width: 960px; 
}
nav ul li { 
display: inline-block; 
line-height: 60px;
margin-left: 10px;
}

nav ul li a {
text-decoration: none; 
color: #a9abae;
}

示例测试站点:

example

也许我必须为此打开一个新的 stackexchange QA，但是有人明白为什么我的窗口宽度比我的部分宽度大吗？我检查了一下，所有内容都是 width:100%？但也许我必须为此提出一个新问题。

Answer 1

根据我在您的测试站点上看到的内容。您声明 .fixed-header 的宽度为 100%，这很好，因为它是一个固定元素，它忽略了父节点的宽度并将大小调整为屏幕的 100%。

然而，当您移动到绝对值时，100% 会查找 DOM 树以查找具有明确大小的对象。由于您没有在任何父节点中声明一个，因此它只是自动调整 Nav ul 内容的 960。

header{
   position:fixed;
   bottom:0;
   z-index:999999;
   min-width:100%; //width or min-width would work here
 }

当您删除 nav 元素的“固定”状态时，这应该给它一个明确的宽度值，因为它会回退到 100% 宽度的固定父元素。