Floornav

HTML 结构

<div id="floornav" class="floornav">
  <a href="#floor1">1楼</a>
  <a href="#floor2">2楼</a>
  <a href="#floor3">3楼</a>
  <a href="#floor4">4楼</a>
  <a href="#floor5">5楼</a>
  <a href="#floor6">6楼</a>
</div>

<div class="floor">占位</div>
<div id="floor1" class="floor">这是1楼</div>
<div id="floor2" class="floor">这是2楼</div>
<div id="floor3" class="floor">这是3楼</div>
<div id="floor4" class="floor">这是4楼</div>
<div id="floor5" class="floor">这是5楼</div>
<div id="floor6" class="floor">这是6楼</div>
<div class="floor">占位</div>

Usage

$('#floornav').floornav(options);

Options

参数可以通过 data attributes 或者 JavaScript 两种方式来配置.

Name	Type	Default	Description
container	object	window	滚动容器.
base	string	'center'	计算区块位置的参照线, 值可以为 'center', 'top', 'bottom'.
threshold	number	0	距离参照线多远即认为区块出现.
activeClass	string	active	导航器当前项样式
showClass	string	show	导航器显示时添加的样式
scrollOffset	number	0	滚动差值, 假如页面有吸顶元素, 点击导航滚动到对应楼层时会被遮挡, 所以提供了这个参数来解决问题.

Methods

.floornav(options)

初始化.

$('#floornav').floornav({
  threshold: 100
});

.floornav('check')

触发一次手动检查.

$('#floornav').floornav('check');

.floornav('update')

当导航或者楼层有变化时，需要手动更新

$('#floornav').floornav('update');

Event

None.

End

Thanks to Bootstrap