懸浮導航欄的實現以及導航跳轉

隨着頁面復雜程度的增加，導航欄的設計就顯得尤為重要。顧名思義，導航，就像航海中的指明燈一樣，要一直存在。實際中都是用戶把頁面卷進去一定高度的時候（此時導航欄可能已從頁面上消失），導航欄要始終固定在頁面的某一部分，一般都為最頂端。

先介紹用到的一些屬性offsetTop,scrollTop. 

offsetTop:獲取元素相對於頁面頂端的高度，只讀，返回的是Number型。

scrollTop：獲取或設置元素相對於垂直滾動條頂部的偏移，可讀寫，返回Number型。當一個元素的實際高度超過其顯示區域的高度時，在一定的設置下，瀏覽器會為該元素顯示相應的垂直滾動條。此時，scrollTop返回的就是該元素在可見區域之上被隱藏部分的高度。

a)懸浮導航欄 

 頁面結構：

<div id="navigation">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
</div>
<div class="model">1</div>
<div class="model">2</div>
<div class="model">3</div>
<div class="model">4</div>

 

（一）使用position屬性實現

#navigation{
  position: relative;
  top: 0;    
}

使用JS，當導航欄超出顯示區域時，即導航欄距頁面頂端的初始高度小於滾動條的垂直偏移時，把position屬性的值改為fixed.

var ele = document.getElementById("navigation");
var top1 = ele.offsetTop;
function scroll_nav1(){
    var top2 = document.documentElement.scrollTop || document.body.scrollTop;
    if(top2>=top1){
        ele.style.position = "fixed";  
    }else{
        ele.style.position = "relative";  
    }
}    
window.onscroll = scroll_nav1;

 

(二)改變元素的style.top屬性值(top可讀寫，返回string型)

因為offsetTop只讀，所以可以改變top的值實現。

var ele = document.getElementById("navigation");
var top1 = ele.offsetTop;
function scroll_nav2(){
　　var top2 = document.documentElement.scrollTop||document.body.scrollTop;
　　if(top2>=top1){
 　　　　ele.style.top = (top2-top1)+"px";  
 　　}else{
 　　　　ele.style.top = 0;  
　　}
}
window.onscroll = scroll_nav2;

b)導航跳轉

　　點擊導航欄上的鏈接跳轉到指定區域,如果導航欄已經處於懸浮狀態，即脫離了正常的文檔流，那么對於arr2中元素的offsetTop屬性的計算就有影響（懸浮前后，該值有兩個結果），導致頁面顯示不統一。所以要在navigation外面再包一層占位(高度要設定)。

<div id="h"> 
  <div id="navigation">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
      <a href="">4</a>
  </div>
</div>
  <div class="model">1</div>
  <div class="model">2</div>
  <div class="model">3</div>
  <div class="model">4</div>

 

 

var arr1 = document.getElementById("navigation").getElementsByTagName("a");
var arr2 = document.getElementsByName("model");
var h1 = document.getElementById("h").offsetHeight;
for(var i=0 ; i<arr1.length ; i++){
  arr1[i].onclick = (function(num){
      return function(){
         var obj = document.body || document.documentElement;
         obj.scrollTop = arr2[num].offsetTop - h1;
      }      
   })(i)  
}