拖動滾動條一定距離可以固定於頂部的導航欄

admin發表於2017-03-04
原文網址 : https://www.softwhy.com/article-2410-1.html

現在比較流行導航欄固定的效果，有的是一開始就固定於頂端，而又有一部分是一開始並不是在頂端，而是拖動滾動條的一定距離，就能夠固定在頂端，這裡就不用多描述了，本站就是採用的這種效果，下面就通過程式碼例項簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
.header{
  background:#CCCC00;
  height:250px;
}
.content{
  background:#0099FF; 
  height:2000px;
}
div.nav{
  background:#000000;
  height:57px;
  line-height:57px;
  color:#ffffff;
  text-align:center;
  font-family:"微軟雅黑", "黑體";
  font-size:30px;
}
div.fixedNav{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:100000;
  _position:absolute;
  _top:expression(eval(document.documentElement.scrollTop));
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
  $(window).scroll(function(){
    if($(window).scrollTop()>=250){
      $(".nav").addClass("fixedNav");
    }
    else{
      $(".nav").removeClass("fixedNav");
    } 
  })
})
</script>
</head>
<body>
<div class="header"></div>
<div class="nav">
  <p>導航固定</p>
</div>
<div class="content"></div>
</body>
</html>

以上程式碼實現了我們的要求，拖動滾動條就可以測試效果，下面介紹一下它的實現過程。

一.實現原理:

在預設狀態下，選單欄出於網頁的某一個位置，當向上拖動滾動條使scrollTop值大於指定距離的時候，也就是恰好出於視窗頂端的時候，將導航欄設定為絕對定位fixed，並且設定它的top和left值為0px，這個時候就能夠固定於視窗頂端了，如果再向上拖動條使scrollTop值小於指定值的時候，再將導航菜欄設定為非定位元素。

二.相關閱讀:

1.scroll事件可以參閱jQuery scroll事件一章節。

2.scrollTop()函式可以參閱jQuery scrollTop()一章節。 

3.addClass()函式可以參閱jQuery addClass()一章節。 

4.removeClass()函式可以參閱jQuery removeClass()一章節。

相關文章