最近開發的一個網站頭部分為上下兩塊，上面是快捷入口部分，下面是導航菜單部分。現在的需求是當頁面往下拉時，快捷入口部分被遮住，而導航菜單固定，而且處于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/>
新聞熱點
疑難解答
