导航栏续之自动切换楼层

原创
2016/11/21 20:28
阅读数 446

滚屏时自动高亮当前楼层对应的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 = {};
}

有空了,做个演示demo分享:)

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部