用java实现楼层导航_楼层导航

滚屏时自动高亮当前楼层对应的tab

这个其实很简单，就是侦听scroll事件，然后依据滚动高度和各楼层的offset top值，计算出与当前楼层最接近的那个楼层，最后高亮相应tab即可。

var top = $win.scrollTop();

var i = 0;

// 寻找当前楼层的序号

floorTops.forEach(function(ot, j){

if (ot <= top + navHeight) i = j;

});

cache[options.key] = i;

// 高亮对应的tab

var tab = $nav.find('li').eq(i);

if (!tab.hasClass('active')) {

highlight(tab);

}

floorTops是什么呢？它缓存了各个楼层offset top值，从而避免了不必要的频繁的页面重绘。

var floorTops = (function (nav){

var tops = [];

var floors = $(options.floor);

nav.find('li').each(function(i) {

tops[i] = Math.floor(floors.eq(i).offset().top);

});

return tops;

})($nav);

页面刷新后自动定位到原楼层

这个也不难实现，缓存当前楼层即可，比如sessionStorage。 刷新时，读取这个值，如果有且大于0，定位到对应楼层。

var curFloor = +cache[options.key];

if (curFloor) {

$nav.find('li').eq(curFloor).click();

} else { // 第一楼层或初次进入，完整显示首屏内容

window.scrollTo(0, 0);

}

这里定位到特定楼层，是通过触发对应tab的响应事件实现的：

$nav.on('click', 'li', function(){

var li = $(this);

var i = li.index();

if (!li.hasClass('active')) {

highlight(li);

}

cache[options.key] = i;

var offset = floorTops[i];

$win.scrollTop(offset - navHeight);

});

那么，为什么缓存楼层而非具体的scrollTop值呢？因为数据是动态的，每次楼层高度可能不一样，而楼层是固定的，这样至少可以避免误定位。

最后提醒一下，safari在隐私模式下，本地存储写操作会抛异常，需要检测可用性：

var cache = win.sessionStorage;

try {

cache.setItem('test', '1');

cache.removeItem('test');

} catch (e) {

cache = {};

}

另外一种方法

$(function () {

var winHeight = $(window).height(), //获取浏览器可视窗口的盖度

headerHeight = $('#showLeft').offset().top, //获取header的高度

onOff = false; //布尔值变量,通错这个变量可以防止快速连续点击的时候出现的连续滚动

console.log(headerHeight);

$(window).on('scroll', function () {

var scTop = $(window).scrollTop(); //获取滚动条的滚动距离

//当楼侧开始出现时显示楼层导航条

if (scTop >= headerHeight - winHeight) {

$('#l-scoll').fadeIn(); //也可以不传参数，传参数表示运动时间

} else {

$('#l-scoll').fadeOut();

}

//滚动时切换显示楼层

if (!onOff) {

$('.index-content-block').each(function (index, element) {

var _top = $(this).offset().top;

//当每层楼的最上面滚动到浏览器窗口的中间时切换导航条的显示

if (scTop >= _top - winHeight / 2) {

//此处添加curr类样式并不是改变显示样式，而是为了标当前所在的楼层

$('.left-list>li').eq(index).addClass('curr').children('.iconFont').show()

.end().siblings().removeClass('curr').children('.iconFont').hide();

}

});

}

})

$('.left-list>li').hover(function () {

$(this).children('.iconFont').show();

}, function () {

//此处用到.not('.curr')来过滤当前楼层，鼠标移开时仍然保持当前的显示样式

$(this).not('.curr').children('.iconFont').hide();

}).on('click', function () {

onOff = true; //将开关变量onOff置为true

var index = $(this).index(), //获取当前点击的li的索引

_top = $('.index-content-block').eq(index).offset().top;//获取相对于的楼层到文档顶部的距离

$(this).addClass('curr').children('.iconFont').show().end()

.siblings().removeClass('curr').children('.iconFont').hide();

$('html,body').animate({'scrollTop': _top}, 400, function () {

onOff = false; //在运动执行完毕的毁掉函数中将onOff的值重置为false

});

//或者也可以用scrollIntoView()方法，只是该方法没有滚动的效果，而是直接跳到浏览器可是窗口的最上面.用法如下：

/*var index = $(this).index();

$('.index-content-block').get(index).scrollIntoView();*/

});

});