5.3导航栏响应滚动

本节将分享的是如何让导航栏高亮显示当前滚动到的内容区域。

实现思路

监听滚动事件，通过每个模块的id获取该内容区域到顶部的距离，然后与滚动距离做对比，在滚动到该区域时，给该内容块对应的导航项添加高亮显示，其他所有的则移除。

代码实现

参考代码如下：

  var navList = document.getElementById('navList');
  // 获取导航栏下的所有导航项
  var oList=navList.getElementsByTagName("a");
  // 获取给内容块距离页面顶部的距离
  var sTop=document.getElementById("service").offsetTop;
  var aTop=document.getElementById("about").offsetTop;
  var cTop=document.getElementById("contact").offsetTop;
 // 定义让某个导航项高亮的函数
  function change(navIndex){
    // 为了防止多次触发，该导航项添加上了高亮显示后就不在反馈添加样式
    if (oList[navIndex].className.indexOf('active') === -1) {
      for(var j=0;j<oList.length;j++){
        if (j === navIndex) {
          oList[j].className+="active";
        } else {
          oList[j].className ="";
        }
     }
    }
  }
  // 监听滚动事件，对不同距离做处理
  document.onscroll = function(){
    var btop = document.body.scrollTop || document.documentElement.scrollTop;
    if (btop > sTop -100 && btop <= aTop -100) {
        change(1);
    }else if(btop > aTop -100 && btop <= cTop -200){
        change(2);
    }else if(btop >  cTop -200){
        change(3);
    } else if  (btop < 100 ){
      change(0);
    }
  }