本節(jié)將分享的是吸頂導(dǎo)航欄的實現(xiàn)。

導(dǎo)航欄還存在的問題

當(dāng)頁面比較長的時候，我們往下滑動得比較多的時候，想回到頭部導(dǎo)航位置，目前只能通過往回滾動到導(dǎo)航位置，這樣的操作顯得繁瑣與不便。

一般優(yōu)化的方式有兩種：

• 在頁面右側(cè)加一個，固定的”回到頂部”按鈕，點擊重新滾動回到頂部導(dǎo)航欄；
• 讓導(dǎo)航欄在頁面向下滾動后吸頂，

其最大的好處是將最常用或者產(chǎn)品想讓用戶看到的內(nèi)容、功能保持在用戶面前，為用戶提供了極大的便利與確保了良好的交互體驗。

實現(xiàn)思路

• 監(jiān)聽 scroll 事件，判斷當(dāng)前頁面的滾動位置，當(dāng)滾動距離大于導(dǎo)航條距頂部的距離時，為導(dǎo)航條采用窗口定位。

  var navBar = document.getElementById("nav");
  var titleTop = navBar.offsetTop;
  document.onscroll = function(){
    var btop = document.body.scrollTop || document.documentElement.scrollTop;
    if (btop > titleTop) {
      navBar.className = "fix";
    } else {
      navBar.className = "";
    }
  }

• 然后在哪css文件中加入fix的樣式定義：

.fix {
  position:fixed;
  top:0;
  left:0;
  background-color:#000;
  color: #fff;
}
.fix a {
  color: #fff;
}