header导航菜单固定 当页面往下拉时固定导航
导读：收集整理的这篇文章主要介绍了header导航菜单固定 当页面往下拉时固定导航，觉得挺不错的，现在分享给大家，也给大家做个参考。 最近开发的一个网站头部分为上下两块，上面是快捷入口部分，下面是导航菜单部分。现在的需求是当页面往下拉时...
收集整理的这篇文章主要介绍了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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： header导航菜单固定 当页面往下拉时固定导航
本文地址： https://pptw.com/jishu/584876.html