1.0.3 • Published 4 years ago
floor-navigation v1.0.3
Floor navigation
Thanks to Floornav
A floor navigation component based on typescript and vanilla js.
HTML
<div id="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
Please write the style yourself.
install floor-navigation npm
.
npm i floor-navigation --save
import floor-navigation.
import Floornav from 'floor-navigation';
new Floornav({
id: 'floornav',
base: 'top',
isToggleShow: false,
...
});
The API
Options
key | description | default | options |
---|---|---|---|
id | the id of the floor element | undefined | string |
container | scroll container | window | window / string |
base | baseline | 0 | top / center / bottom |
threshold | threshold | 0 | number |
scrollOffset | the offset from baseline | 0 | number |
activeClass | the active class of the current floor item | active | string |
showClass | class at the floor display | show | string |
isToggleShow | Whether the floor disappears with the content | true | boolean |
navActiveCallback | the navigation active callback | -- | function |