php固定当前导航栏,header导航菜单固定 当页面往下拉时固定导航

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

具体效果请转往jsfiddle网站：http://jsfiddle.net/tounaobun/AnTQU/

下面是具体代码：

复制代码代码如下:

* {

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;

}

• News
• Book
• Game
• Sports

This is welcome entry

• News
• Book
• Game
• Sports