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][/html] view plaincopy

  1. <html>
  2. <head>
  3. <style>
  4.     * {
  5.         padding:0;
  6.         margin:0;
  7.         border:0;
  8.     }
  9.     #fixed_header {
  10.         position:fixed;
  11.         z-index:1;
  12.         top:0;
  13.         width:100%;
  14.         background-color:#ccc;
  15.     }
  16.     #navi {
  17.         margin:0 auto;
  18.         text-align:center;
  19.     }
  20.     li {
  21.         list-style-type:none;
  22.         display:inline;
  23.     }
  24.     #real_header {
  25.         position:absolute;
  26.         width:100%;
  27.         z-index:2;
  28.         background-color:#ccc;
  29.     }
  30.     #entry {
  31.         margin:0 auto;
  32.         text-align:center;
  33.         background-color:#ccc;
  34.     }
  35. </style>
  36. </head>
  37. <body>
  38.     <div id=”fixed_header”>
  39.         <div id=”navi”>
  40.             <ul>
  41.                 <li>News</li>
  42.                 <li>Book</li>
  43.                 <li>Game</li>
  44.                 <li>Sports</li>
  45.             </ul>
  46.         </div>
  47.     </div>
  48.     <div id=”real_header”>
  49.         <div id=”entry”>
  50.             <p>This is welcome entry</p>
  51.         </div>
  52.         <div id=”navi”>
  53.             <ul>
  54.                 <li>News</li>
  55.                 <li>Book</li>
  56.                 <li>Game</li>
  57.                 <li>Sports</li>
  58.             </ul>
  59.         </div>
  60.     </div>
  61. <br/><br/><br/><br/><br/><br/>
  62. <br/><br/><br/><br/><br/><br/>
  63. <br/><br/><br/><br/><br/><br/>
  64. <br/><br/><br/><br/><br/><br/>
  65. <br/><br/><br/><br/><br/><br/>
  66. <br/><br/><br/><br/><br/><br/>
  67. <br/><br/><br/><br/><br/><br/>
  68. <br/><br/><br/><br/><br/><br/>
  69. <br/><br/><br/><br/><br/><br/>
  70. <br/><br/><br/><br/><br/><br/>
  71. <br/><br/><br/><br/><br/><br/>
  72. <br/><br/><br/><br/><br/><br/>
  73. <br/><br/><br/><br/><br/><br/>
  74. <br/><br/><br/><br/><br/><br/>
  75. <br/><br/><br/><br/><br/><br/>
  76. </body>
  77. </html>

标签