header导航栏菜单固定不动 当网页页面拉下去时固

日期:2021-03-09 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

近期开发设计的1个网站头顶部分成左右两块,上面是便捷通道一部分,下面是导航栏菜单一部分。如今的要求是当网页页面拉下去时,便捷通道一部分被遮挡住,而导航栏菜单固定不动,并且处在window最上面。在StackOverflow网站上收集过材料,而且参考网站http://ilikecss.com/web-design/examples/framework/20110928/的源码,发实际现该作用的重要流程有两点,第1点是必须建立两个header,1个是固定不动的导航栏工具栏,1个是基本的头顶部(包含便捷通道一部分和导航栏菜单)。此外1点是必须设定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">
<p>This is welcome 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>
上一篇:CSS3照片转动殊效(360/60/ 返回下一篇:没有了