可以固定的頂部的導航選單簡單例項程式碼

antzone發表於2017-03-02
單例

固定於網頁頂部的導航欄效果在當下網站比較流行，所謂的固定於網頁的頂部一般來說並不是一直固定於頂部，而是在開始是位於某一個位置，當下拉滾動條使其到達頂部的時候才會固定在頂部，下面通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>導航欄固定於網頁頂部程式碼-螞蟻部落</title>
<style type="text/css">
* {
  padding:0;
  margin:0;
}
.ab {
  width:100%;
  background-color:#eee;
  height:250px;
  text-align:center;
  line-height:250px;
}
.bc {
  width:100%;
  background-color:#eee;
  text-align:center;
  text-align:center;
  color:#fff;
  font-size:24px;
  height:2000px;
}
.pf {
  width:100%;
  height:50px;
  background-color:#C00;
  text-align:center;
  line-height:50px;
  color:#fff;
}
/*---------------------漂浮導航---------------------------*/ 
html {
  _background-image:url(about:blank);
  _background-attachment:fixed;/** 防止 ie6 抖動 **/
}
.float {
  position:fixed;
  z-index:999999;
  top:0px;
}
* html .float {
  position:absolute;
  _top:expression(documentElement.scrollTop-0);
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
window.onscroll=function(){ 
  if($(document).scrollTop()>250) { 
    $(".pf").addClass('float'); 
  }
  else{ 
    $(".pf").removeClass('float'); 
  } 
} 
</script>
</head>
<body>
<div class="ab">第一版塊</div>
<div class="pf">漂浮內容</div>
<div class="bc"></div>
</body>
</html>

以上程式碼實現了我們的要求，可以將模擬的導航欄固定於網頁的頂部，當然這裡的導航欄只是一個div塊而已，在實際應用中可以根據自己的專案需求進行修改，程式碼比較簡單，這裡就不多介紹了。

相關文章