导航固定,固定菜单最近开发的一个网站头部分为上下两块，上面是快捷入口部分，下面是导航菜单部分。现在的需求是当页面往下拉时，快捷入口部分被遮住，而导航菜单固定，而且处于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>
导航固定,固定菜单
|
