header導航菜單固定當頁面往下拉時固定導航

發(fā)布時間：2013-08-18 10:07:59 作者：佚名

最近開發(fā)的一個網(wǎng)站頭部分為上下兩塊，上面是快捷入口部分，下面是導航菜單部分，需要兩步來實現(xiàn)第一點是需要創(chuàng)建兩個header，一個是固定的導航菜單欄，具體的思路及代碼如下，有此需求的朋友可以參考下，希望對大家有所幫助

最近開發(fā)的一個網(wǎng)站頭部分為上下兩塊，上面是快捷入口部分，下面是導航菜單部分?，F(xiàn)在的需求是當頁面往下拉時，快捷入口部分被遮住，而導航菜單固定，而且處于window最上面。在StackOverflow網(wǎng)站上搜集過資料，并且參照網(wǎng)站http://ilikecss.com/web-design/examples/framework/20110928/的源代碼，發(fā)現(xiàn)實現(xiàn)該功能的關鍵步驟有兩點，第一點是需要創(chuàng)建兩個header，一個是固定的導航菜單欄，一個是常規(guī)的頭部（包括快捷入口部分和導航菜單）。另外一點是需要設置z-index的值（對于非static的position來說，z-index越大，它離用戶也就越近，這樣就可以在初始時遮住固定部分的導航菜單，而當頁面往下拉時，隨著常規(guī)菜單被遮住，固定部分也就浮出來了。)

具體效果請轉往jsfiddle網(wǎng)站：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">
This is welcome entry
</div>
<div id="navi">
<ul>
<li>News</li>
<li>Book</li>
<li>Game</li>
<li>Sports</li>
</ul>
</div>
</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>