將導航欄始終固定在窗口頂部:

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。