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

2024-07-11 08:28:33

字體：大中小

來源：轉載

供稿：網友

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

上一篇：在ul中使li水平布局的兩種方法

下一篇：CSS 樣式覆蓋原理示例介紹

發表評論

共有條評論