header导航菜单固定当页⾯往下拉时固定导航
最近开发的⼀个⽹站头部分为上下两块，上⾯是快捷⼊⼝部分，下⾯是导航菜单部分。现在的需求是当页⾯往下拉时，快捷⼊⼝部分被遮住，⽽导航菜单固定，⽽且处于window最上⾯。在StackOverflow⽹站上搜集过资料，并且参照⽹站
ilikecss/web-design/examples/framework/20110928/的源代码，发现实现该功能的关键步骤有两点，第⼀点是需要创建两个header，⼀个是固定的导航菜单栏，⼀个是常规的头部（包括快捷⼊⼝部分和导航菜单）。另外⼀点是需要设置z-index的值（对于⾮static的position来说，z-index越⼤，它离⽤户也就越近，这样就可以在初始时遮住固定部分的导航菜单，⽽当页⾯往下拉时，随着常规菜单被遮住，固定部分也就浮出来了。)
具体效果请转往jsfiddle⽹站：jsfiddle/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>
js导航栏下拉菜单</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。