如何将导航栏始终固定在窗口顶部_html/css

如何将导航栏始终固定在窗口顶部_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:41:02

原创

3226人浏览过

如何将导航栏始终固定在窗口顶部:
在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例:

<!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浏览器并不支持，所以还需要进行浏览器兼容性设置，那就是添加以下代码即可:

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

登录后复制

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/589.html

最为原始地址是:http://www.softwhy.com