側欄懸浮導航選單拖動滾動條可以自動定位效果

antzone發表於2017-04-01

本章節分享一段非常實用的導航選單，它實現了多種比較人性化的導航功能。

（1）.實現了側欄懸浮效果。

（2）.側欄導航能夠實現隱藏摺疊效果。

（3）.拖動滾動條的時候，能夠實現自動定位效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul{list-style-type: none;}
a{text-decoration: none;}
/*文章內容區*/
#content{
  width:400px;
  height:3000px;
  margin:0 auto;
  font-size:2em;
}
#content p{
  height:400px;
  text-align:center;
  line-height:400px;
  background:#CCC;
}
/*懸浮選單*/
.menu{
  position:fixed;
  top:20%;
  right:0;
  width:200px;
  border:1px solid gray;
  border-radius:5px;
}
.menu li{
  height:2em;
  line-height:2em;
}
.red{color:red;}
.hide{display:none;}
/*隱藏懸浮選單*/
.slideIn{
  transform:translate3d(202px, 0, 0);
  transition-duration:.5s;
}
/*顯示懸浮選單*/
.slideOut{
  transform:translate3d(0, 0, 0);
  transition-duration:.5s;
}
.static{
  color:#007aff;
  text-align:center;
}
/*顯示懸浮球*/
.toShow{
  display:block;
  width:4.8em;
  height:2em;
  line-height:2em;
  border-radius:.5em;
  border:1px solid gray;
  transform:translate3d(-5em, 0, 0);
  transition-duration:1s;
}
</style>
<script>
function done(doc){
  var pos = [],
     links = doc.getElementsByTagName('a'),
     titles = doc.getElementsByTagName('h1'),
     menu = doc.getElementById('menubar'),
     currentItem=null;
          
   var addClass = function (element){
     currentItem && currentItem.removeAttribute('class');
     element.setAttribute('class','red');
     currentItem = element;
   },
    
   getScrollTop = function (){
     return Math.ceil(document.documentElement.scrollTop||document.body.scrollTop)+1;
   },
    
   startScroll = function (){
     var scrollTop = getScrollTop(),
         len = titles.length,
         index = 0;
                  
     if(scrollTop>=0 && scrollTop<pos[0]){
       addClass(links[0]);
       return;
     }
          
     if(scrollTop>=pos[len-1]){
       addClass(links[len-1]);
       return;
     }
          
     for(;index<len;index++){
       if(scrollTop > pos[index] && scrollTop < pos[index+1]){
         addClass(links[index]);
         break;
       }
     }
   };
    
   menu.onclick=function(e){
     var e=window.event||e
     var target = e.target || e.srcElement;
     if(target.nodeName.toLowerCase() === 'a'){
       addClass(target);
       return;
     }
     if(target.nodeName.toLowerCase() === 'p'){
       if(target.className == 'static'){
         this.className = 'menu slideIn';
         setTimeout(function(){
           target.className = 'static toShow';
           target.innerHTML = '顯示';
         },1000);
       }else{
         target.className = 'static';
         target.innerHTML = '隱藏';
         this.className = 'menu slideOut';
       }
     }
   }
    
   var ln = titles.length;
   while(--ln>-1){
     pos.unshift(titles[ln].offsetTop);
   }
   startScroll();
   window.onscroll = function(){
     startScroll()
  }
}
window.onload=function(){
  done(document)
}
</script>
</head>
<body>
<div id="show"></div>
<div id="content">
  <h1 id="div">div教程</h1>
  <p>div教程</p>
  <h1 id="css">css教程</h1>
  <p>css教程</p>
  <h1 id="antzone">螞蟻部落</h1>
  <p>螞蟻部落</p>
  <h1 id="json">json教程</h1>
  <p>json教程</p>
</div>
<div class="menu" id="menubar">
  <p class="static">隱藏</p>
  <ul>
    <li><a href="#div">div教程</a></li>
    <li><a href="#css">css教程</a></li>
    <li><a href="#antzone">螞蟻部落</a></li>
    <li><a href="#json">json教程</a></li>
  </ul>
</div>
</body>
</html>

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

一.實現原理:

（1）.關於側欄懸浮功能:

這是就是給menubar設定position:fixed定位，然後設定相應的left和right值即可。

（2）.關於隱藏和顯示功能:

非常的簡單，就是通過javascript動態的方式為導航指定的元素新增相應的class類，css程式碼是用過css3方式實現的。

（3）.自動定位效果:

此效果是通過計算上滾的距離和標題距離頂部的距離進行相關判斷實現的，如果在指定的區間，那麼就設定相應的側欄導航選單的對應的導航欄目的字型顏色為紅色。

二.程式碼註釋:

（1）.function done(doc){}，此方法實現了導航選單效果，引數是document物件。

（2）.var pos = []，宣告一個空陣列，用來存放內容<h1>距離文件頂部的距離。

（3）.links = doc.getElementsByTagName('a')，獲取文件中的連結<a>元素，當然這裡只有側欄導航選單才有<a>元素，如果實際應用中其他地方也有<a>元素，那麼可以更精確的控制獲取<a>的上下文。

（4）.titles = doc.getElementsByTagName('h1')，和上面是一樣的道理，獲取<h1>元素集合。

（5）.menu = doc.getElementById('menubar')，獲取導航選單物件。

（6）.currentItem=null，宣告一個變數並賦初值為null，用來存放當前的連結<a>元素。

（7）.var addClass = function (element){

  currentItem && currentItem.removeAttribute('class');

  element.setAttribute('class','red');

  currentItem = element;

}，此方法可以實現將當前所在的導航連結<a>字型顏色設定為紅色，並將之前為紅色的連結<a>恢復原貌。

（8）.getScrollTop = function (){

  return Math.ceil(document.documentElement.scrollTop||document.body.scrollTop)+1;

}，此方法可以獲取頁面向上滾動的距離，當然略有差距，因為進行了加1和數字轉換操作。

（9）.startScroll = function (){}，此方法實現了拖動滾動條實現導航自動定位功能。

（10）.var scrollTop = getScrollTop()，獲取頁面向上滾動的距離。

（11）.len = titles.length，獲取<h1>的數量。

（12）.index = 0，宣告一個變數並賦值為0，用來遍歷迴圈中使用。

（13）.if(scrollTop>=0 && scrollTop<pos[0]){

  addClass(links[0]);

  return;

},如果向上滾動的距離大約等於0小於第一個<h1>距離頁面頂端的距離，那麼側欄導航選單的第一個<a>字型顏色設定為紅色。

（14）.if(scrollTop>=pos[len-1]){

  addClass(links[len-1]);

  return;

}，如果向上滾動的距離，大於最後一個<h1>距離頂部的距離，那麼就將側欄導航選單的最後一個<a>字型顏色設定為紅色。

（15）.for(;index<len;index++){

  if(scrollTop > pos[index] && scrollTop < pos[index+1]){

    addClass(links[index]);

    break;

  }

},此迴圈語句是用來設定側欄導航選單哪一個連結<a>的字型顏色應該是紅色。

（16）. menu.onclick=function(e){}，此側欄導航註冊click事件處理函式。

（17）.var e=window.event||e，獲取相容所有瀏覽器的事件物件。（18）.var target = e.target || e.srcElement，獲取相容所有瀏覽器的事件源物件。

（19）.if(target.nodeName.toLowerCase() === 'a'){

  addClass(target);

  return;

}，將當前點選的連結a字型顏色設定為紅色。

（20）.if(target.nodeName.toLowerCase() === 'p'){

  if(target.className == 'static'){

    this.className = 'menu slideIn';

      setTimeout(function(){

        target.className = 'static toShow';

        target.innerHTML = '顯示';

      },1000);

    }else{

      target.className = 'static';

      target.innerHTML = '隱藏';

      this.className = 'menu slideOut';

    }

}實現了側欄導航選單的顯示和隱藏效果。

（21）.var ln = titles.length，獲取<h1>元素的數目。

（22）.while(--ln>-1){

  pos.unshift(titles[ln].offsetTop);

},將所有的<h1>元素距離頁面頂部的距離存入陣列。

（23）.startScroll()，執行此函式。

（24）.window.onscroll = function(){

  startScroll()

}，拖動滾動條的時候，能夠實現導航選單自動定位效果。

三.相關閱讀:

（1）.transform可以參閱CSS3 transform一章節。

（2）.removeAttribute()方法可以參閱removeAttribute()一章節。

（3）.setAttribute()方法可以參閱setAttribute()一章節。

（4）.Math.ceil()可以參閱javascript Math.ceil()一章節。

（5）.document.documentElement.scrollTop||document.body.scrollTop參閱document.documentElement.scrollTop瀏覽器相容。

（6）.scrollTop屬性可以參閱scrollTop一章節。

（7）.var e=window.event||e可以參閱var ev=window.event||ev的作用是什麼一章節。

（8）.target可以參閱javascript event.target一章節。

（9）.srcElement屬性可以參閱javascript event.srcElement一章節。

（10）.className屬性可以參閱javascript className一章節。

（11）.unshift()方法可以參閱javascript unshift()一章節。

（12）.onscroll事件可以參閱javascript scroll 事件一章節。

相關文章