主页 / 建站知识 /

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

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
最近开发的一个网站头部分为上下两块，上面是快捷入口部分，狼蚁网站SEO优化是导航菜单部分。现在的需求是当页面往下拉时，快捷入口部分被遮住，而导航菜单固定，而且处于window最上面。在StackOverflow网站上搜集过资料，并且参照网站http://ilikecss./web-design/examples/framework/20110928/的源代码，发现实现该功能的关键步骤有两点，第一点是需要创建两个header，一个是固定的导航菜单栏，一个是常规的头部（包括快捷入口部分和导航菜单）。一点是需要设置z-index的值（对于非static的position来说，z-index越大，它离用户也就越近，这样就可以在初始时遮住固定部分的导航菜单，而当页面往下拉时，随着常规菜单被遮住，固定部分也就浮出来了。)

具体效果请转往jsfiddle网站http://jsfiddle./tounaobun/AnTQU/
狼蚁网站SEO优化是具体代码

复制代码
代码如下:

<html>
<head>
<style>
{
padding:0;
margin:0;
border:0;
}
#fixed_header {
position:fixed;
z-index:1;
:0;
width:100%;
background-color:#c;
}
#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:#c;
}
#entry {
margin:0 auto;
text-align:center;
background-color:#c;
}
</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 wele 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/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
</body>
</html>
上一篇：在ul中使li水平布局的两种方法 下一篇：CSS 样式覆盖原理示例介绍

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by