固定在頂部的導航選單

admin發表於2019-02-02

很多網站的導航選單有這樣類似功能，在向下拖動滾動條的時候，能夠將導航選單固定於頂部。

本章節分享一段具有緩衝效果的類似功能，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
*{
  margin:0;
  padding:0;
}
ul,li{list-style:none;}
#content{
  width:600px;
  margin:0 auto;
  border:1px solid #f00;
}
ul li.item{
  width:400px;
  text-align:center;
  margin:20px 100px;
  background:#00f;
  color:#fff;
  font-size:14px;
  font-weight:bold;
  height:100px;
  line-height:100px;
}
#float_banner{
  position:absolute;
  top:0;
  left:50%;
  width:900px;
  margin-left:-450px;
  height:30px;
  line-height:30px;
  text-align:center;
  background:#000;
  color:#fff;
  font-size:14px;
  font-weight:bold;
  z-index:2;
}
</style>
<script>
window.onload = function () {
  var speed = 100;
  var scrollTop = null;
  var float_banner;
  var pos = null;
  var timer = null;
  var moveHeight = null;
  float_banner = document.getElementById("float_banner");
  window.onscroll = scroll_ad;
  function scroll_ad() {
    pos = document.documentElement.scrollTop - float_banner.offsetTop;
    pos = pos / 10
    moveHeight = pos > 0 ? Math.ceil(pos) : Math.floor(pos);
    if (moveHeight != 0) {
      float_banner.style.top = float_banner.offsetTop + moveHeight + "px";
      setTimeout(scroll_ad, speed);
    }
  }
}
</script>
</head>
<body>
<div id="float_banner">這裡是頂部的橫幅，隨著頁面滾動而浮動</div> 
<ul id="content">
 <li class="item">第一塊內容</li>
 <li class="item">第二塊內容</li>
 <li class="item">第三塊內容</li>
 <li class="item">第四塊內容</li>
 <li class="item">第五塊內容</li>
 <li class="item">第六塊內容</li>
 <li class="item">第七塊內容</li>
 <li class="item">第八塊內容</li>
 <li class="item">第九塊內容</li>
 <li class="item">第十塊內容</li>
</ul>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var speed = 100，用作定時器函式的重複執行間隔。

（3）.var scrollTop = null，宣告一個變數並賦值為null，後面會用到。

（4）.var float_banner，儲存頂部導航欄元素物件。

（5）.var pos = null，宣告一個變數後面會用到。

（6）.var timer = null，宣告一個變數用作定時器函式的標識。

（7）.var moveHeight = null，宣告一個變數後面會用到。

（8）.float_banner = document.getElementById("float_banner")，獲取頂部導航欄元素物件。

（9）.window.onscroll = scroll_ad，註冊onscroll事件處理函式。

（10）.function scroll_ad() {}，此函式作為onscroll事件的事件處理函式。

（11）.pos = document.documentElement.scrollTop - float_banner.offsetTop，獲取scrollTop和導航選單距離body的距離之差。

（12）.pos = pos / 10，除以10。

（13）.moveHeight = pos > 0 ? Math.ceil(pos) : Math.floor(pos)，如果pos大於0，那麼上舍入，否則下舍入。pos大於0，說明是在向下拖動滾動選單，小於0是向上拖動滾動選單。

（14）.if (moveHeight != 0) {

  float_banner.style.top = float_banner.offsetTop + moveHeight + "px";

  setTimeout(scroll_ad, speed);

}不等於0，說明scrollTop - float_banner.offsetTop差還不相等，導航選單沒有位於頂部。

那麼繼續設定導航選單的top值。

並且使用setTimeout()遞迴呼叫函式本身。

二.相關閱讀:

（1）.window.onscroll事件參閱JavaScript scroll事件一章節。

（2）.document.documentElement.scrollTop參閱JavaScript scrollTop一章節。

（3）.offsetTop參閱JavaScript offsetTop一章節。

（4）.Math.ceil()參閱JavaScript Math.ceil()一章節。

（5）.Math.floor()參閱JavaScript Math.floor()一章節。

（6）.setTimeout()參閱setTimeout()方法一章節。

相關文章