将导航栏始终固定在窗口顶部:

时间 2019-12-05

标签导航始终固定窗口顶部繁體版

原文原文链接

代码实例

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>固定在窗口顶部</title> 
<style type="text/css">
*{
  padding:0px;
  margin:0px;
}
body, ul, li{
  background-color:white;
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  text-align:center;
}
#main{
  width:20px;
  height:1000px;
  margin:0px auto;
  background-color:#CCC;
}
#nav{
  width:500px;
  margin:0px auto;
  position:fixed;/*固定做用*/
  top:0px;
  left:490px;
  /*ie6下样式，加下划线表示只针对ie6 的hack */
  _position:absolute;/* 把导航栏位置定义为绝对位置  关键*/
  _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端  关键 */
  z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
  text-align:left;
}
a{
  color:#000000;
  text-decoration:none;
}
.menu{
  width:120px;
  height:18px;
  margin:0px 4px 0px 0px;
  background-color:#F5F5F5;
  color:#999999;
  border:1px solid #EEE8DD;
  padding:6px 0px 0px 0px;
  overflow-y:hidden;
  cursor:hand;
  display:inline;
  list-style:none;
  font-weight:bold;
  float:left;
}
</style>
</head>
<body>
<div id="nav">
  <ul>
    <li class="menu"><a href="#">前台专区</a></li>
    <li class="menu"><a href="#">后台专区</a></li>
    <li class="menu"><a href="#">交流专区</a></li>
  </ul>
</div>
<div id="main">你们拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
</body>
</html>

上面的代码已经实现了须要的功能，导航条固定在了网页的顶部，这个主要是使用了position:fixed，而后将top值设置为0便可，可是仅仅使用position:fixed仍是不够，由于IE6浏览器并不支持，因此还须要进行浏览器兼容性设置，那就是添加如下代码便可:css

_position:absolute;/* 把导航栏位置定义为绝对位置关键*/ _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端关键 */html

主要是fixedexpress