粘滞标题onscroll +窗口大小

嗨我跟着一个代码审查代码片段实施在我的网站上我稳步建设。粘滞标题onscroll +窗口大小

我已经发现如何让它坚持在底部，并向下滚动它坚持到顶部。但是，当它显示在底部时，它不会完全显示导航。 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，但有人明白为什么我的窗口宽度大于我的部分宽度？我检查过，一切都是宽度：100％？但是，也许我必须为此打开一个新的问题。

来源

2015-02-08 Blckpstv

从我可以在您的测试网站上看到的东西。你说的是.fixed-header的100％宽度，这是很好的，因为它是一个固定的元素，它忽略了父节点的宽度和大小到屏幕的100％。

但是，当您移至绝对位置时，100％会查找DOM树以查找具有明确大小的对象。由于您没有在任何父节点中声明一个，那么它只是自动调整Nav ul内容的大小。

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

当您移除导航元素的“固定”状态时，应该给它一个明确的宽度值，因为它会回退到100％宽度的固定父项。

来源

2015-02-08 16:58:44

粘滞标题onscroll +窗口大小

回答

相关问题