5.2吸顶导航栏的实现

本节将分享的是吸顶导航栏的实现。

导航栏还存在的问题

当页面比较长的时候，我们往下滑动得比较多的时候，想回到头部导航位置，目前只能通过往回滚动到导航位置，这样的操作显得繁琐与不便。

一般优化的方式有两种：

• 在页面右侧加一个，固定的”回到顶部”按钮，点击重新滚动回到顶部导航栏；
• 让导航栏在页面向下滚动后吸顶，

其最大的好处是将最常用或者产品想让用户看到的内容、功能保持在用户面前，为用户提供了极大的便利与确保了良好的交互体验。

实现思路

• 监听 scroll 事件，判断当前页面的滚动位置，当滚动距离大于导航条距顶部的距离时，为导航条采用窗口定位。

  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;
}