悬浮导航栏的实现以及导航跳转

随着页面复杂程度的增加，导航栏的设计就显得尤为重要。顾名思义，导航，就像航海中的指明灯一样，要一直存在。实际中都是用户把页面卷进去一定高度的时候（此时导航栏可能已从页面上消失），导航栏要始终固定在页面的某一部分，一般都为最顶端。

先介绍用到的一些属性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)  
}