ホームページ > 記事 > ウェブフロントエンド > ナビゲーション バーを常に window_html/css_WEB-ITnose の上部に固定する方法
ナビゲーション バーを常に window_html/css_WEB-ITnose の上部に固定する方法
- WBOYオリジナル
- 2016-06-24 11:41:022954ブラウズ
ナビゲーション バーを常にウィンドウの上部に固定する方法:
多くの Web サイトでは、ナビゲーション バーまたはナビゲーション バーに類似した一部の機能を、ドロップダウンであっても常に Web ページの上部に固定できます。この方法では、スクロール バーがウィンドウによってブロックされなくなります。この機能は非常に便利です。この機能の実装方法を簡単に紹介します。まずコード例を見てみましょう:
<!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> 上記のコードは、Web ページの上部にナビゲーション バーを固定します。これは主に、position:fixed を使用し、上部の値を 0 に設定します。ただし、IE6 ブラウザは Position:fixed をサポートしていないため、position:fixed を使用するだけでは十分ではありません。そのため、ブラウザの互換性を設定する必要があります。つまり、次のコードを追加する必要があります:
_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/_top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
元のアドレスは: http:/ /www.51texiao .cn/div_cssjiaocheng/2015/0503/589.html
最もオリジナルのアドレスは次のとおりです: http://www.softwhy.com
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。