Heim > Artikel > Web-Frontend > 如何将导航栏始终固定在窗口顶部_html/css_WEB-ITnose
如何将导航栏始终固定在窗口顶部_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:022954Durchsuche
如何将导航栏始终固定在窗口顶部:
在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例:
<!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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：为什么要给“Div”等容器添加Flex属性样式？_html/css_WEB-ITnoseNächster Artikel：7月15日学习之BOM_html/css_WEB-ITnose