Home >Web Front-end >HTML Tutorial >How to keep the navigation bar always fixed at the top of the window_html/css_WEB-ITnose
How to keep the navigation bar always fixed at the top of the window_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:022999browse
How to always fix the navigation bar at the top of the window:
On many websites, the navigation bar or some functions similar to the navigation bar can always be fixed at the top of the web page, even if the scroll bar is pulled down. It will not be blocked by the window. This function is often very useful. Here is a brief introduction on how to implement this function. Let’s look at a code example first:
<!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> The above code has achieved the required functions. The navigation bar is fixed at the top of the web page. This mainly uses position:fixed, and then Just set the top value to 0, but just using position:fixed is not enough. Because the IE6 browser does not support it, you also need to set the browser compatibility. That is to add the following code:
_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/_top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0503/589.html
The most original address is: http://www.softwhy .com