header导航菜单固定当页面往下拉时固定导航

ttx9n · 发表于 2013-8-18 10:07:59

最近开发的一个网站头部分为上下两块，上面是快捷入口部分，下面是导航菜单部分，需要两步来实现第一点是需要创建两个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>
<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>

gc4hg · 发表于 2022-8-31 17:07:44

建军节建军节建军节建军节

leidie123a · 发表于 2022-11-4 04:54:36

哦哦哦ijhhsdj

0y3yp · 发表于 2022-11-17 02:35:54

哈哈哈哈哈哈哈

btbhs8t · 发表于 2023-2-24 15:15:24

撒房产税陈飞飞

czoz5y · 发表于 2023-3-16 20:05:46

看看看看看看看看看看看看看看看看看看看看看看看看看看看

4r8oiin60 · 发表于 2023-4-25 16:45:40

啪啪啪生怕PSP怕

q215357618 · 发表于 2023-10-17 11:59:57

需要很久了终于找到了

9jduu05 · 发表于 2024-4-13 02:44:10

女生看了弄丢了卡萨诺的卡洛斯

jasonlong · 发表于 2024-6-10 12:01:51

很不错的源码论坛

账号		自动登录	找回密码
密码			立即注册

[CSS] header导航菜单固定 当页面往下拉时固定导航

[CSS] header导航菜单固定当页面往下拉时固定导航