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