楼层导航

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

另外一种方法

<script>
    $(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();*/
        });
    });
</script>