通过数组对楼层 导航设置js文件说明

要求：1.当楼层滚动到达后，对应显示出导航栏，（超出范围会隐藏）并对其高亮显示。

           2.点击任意导航栏，会运动到指定位置 。

// 首先获取楼层和侧导航栏的元素，然后用空数组储存元素，

// 接着将楼层进行遍历（each）数组并写出每层距离（offset）顶部的距离

// 然后设置文档滚动事件，判断文档滚动的距离是否大于第一个楼层距顶部的距离，若是，则让侧导航栏显示，否则隐藏

// 最后遍历楼层，设判断若滚动的距离大于楼层距顶部的距离，那么，给侧导航栏的对应元素进行选择添加类名，让兄弟级移除类名

var $lis = $(".subnav ul li");
var $jds = $(".louceng .jd");
var arr = [];
$jds .each(function(i){
arr[i] = $(this).offset().top;

})
$(document).scroll(function( ) {
  var v = $(this).scrollTop();
  if(v >= arr[0]) {
    $(".subnav").show();

  }else {
    $(".subnav").hide();
  }
  $jds.each(function(i) {
    if (v>= arr[i]) {
      $lis.eq(i).addClass("current").siblings().removeClass("current");
    }
  })
})

// 给导航添加点击事件，获取用户点击楼层的下标，找到对应楼层获取楼层距顶部的高度
// 最后给页面添加一个运动效果，运动到指定楼层

 

$lis.click(function ( ) {
  var idx = $(this).index();
  var value = arr[idx];
  $("html,body").animate({
    "scrollTop":value
  },600)
})

后给页面添加一个运动效果，运动到指定楼层