要求: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)
})
后给页面添加一个运动效果,运动到指定楼层