当前位置:首页 >> 网页制作

header导航菜单固定 当页面往下拉时固定导航

最近开发的一个网站头部分为上下两块,上面是快捷入口部分,下面是导航菜单部分。现在的需求是当页面往下拉时,快捷入口部分被遮住,而导航菜单固定,而且处于window最上面。在StackOverflow网站上搜集过资料,并且参照网站http://ilikecss.com/web-design/examples/framework/20110928/的源代码,发现实现该功能的关键步骤有两点,第一点是需要创建两个header,一个是固定的导航菜单栏,一个是常规的头部(包括快捷入口部分和导航菜单)。另外一点是需要设置z-index的值(对于非static的position来说,z-index越大,它离用户也就越近,这样就可以在初始时遮住固定部分的导航菜单,而当页面往下拉时,随着常规菜单被遮住,固定部分也就浮出来了。)

具体效果请转往jsfiddle网站:http://jsfiddle.net/tounaobun/AnTQU/
下面是具体代码:

复制代码代码如下:
<html>
<head>
<style>
* {
padding:0;
margin:0;
border:0;
}
#fixed_header {
position:fixed;
z-index:1;
top:0;
width:100%;
background-color:#ccc;
}
#navi {
margin:0 auto;
text-align:center;
}
li {
list-style-type:none;
display:inline;
}
#real_header {
position:absolute;
width:100%;
z-index:2;
background-color:#ccc;
}
#entry {
margin:0 auto;
text-align:center;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="fixed_header">
<div id="navi">
<ul>
<li>News</li>
<li>Book</li>
<li>Game</li>
<li>Sports</li>
</ul>
</div>
</div>
<div id="real_header">
<div id="entry">
<p>This is welcome entry</p>
</div>
<div id="navi">
<ul>
<li>News</li>
<li>Book</li>
<li>Game</li>
<li>Sports</li>
</ul>
</div>
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
</body>
</html>