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

最近开发的一个网站头部分为上下两块，上面是快捷入口部分，下面是导航菜单部分。现在的需求是当页面往下拉时，快捷入口部分被遮住，而导航菜单固定，而且处于window最上面。在StackOverflow网站上搜集过资料，并且参照网站http://ilikecss .COM /web-design/ex am ples/framework/20110928/的源代码，发现实现该功能的关键步骤有两点，第一点是需要创建两个header，一个是固定的导航菜单栏，一个是常规的头部（包括快捷入口部分和导航菜单）。另外一点是需要设置z -i ndex的值（对于非 stat ic的pos IT ion来说，z-index越大，它离用户也就越近，这样就可以在初始时遮住固定部分的导航菜单，而当页面往下拉时，随着常规菜单被遮住，固定部分也就浮出来了。)

具体效果请转往jsfiddle网站：http://jsfiddle.net/tounaobun/AnTQU/
下面是具体代码：

复制代码

代码如下:

<ht ML >
<head>
<style>
* {
padding:0;
m arg in:0;
border:0;
}
# fixed_header {
position:fixed;
z-index:1;
top:0;
width:100%;
background-color:#ccc;
}
#navi {
mar gin :0 auto;
text-align: center ;
}
li {
list -s tyle -t y PE :none;
dis play :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>

总结

以上是为你收集整理的 header导航菜单固定当页面往下拉时固定导航全部内容，希望文章能够帮你解决 header导航菜单固定当页面往下拉时固定导航所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于header导航菜单固定当页面往下拉时固定导航的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did204786

更新时间：2023-05-03 阅读：14次

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

总结

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