1.0.4 • Published 5 years ago

t-floornav v1.0.4

Weekly downloads
3
License
ISC
Repository
github
Last release
5 years ago

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 t-floornav npm.

npm i t-floornav --save

import t-floornav.

import Floornav from 't-floornav';

new Floornav({
  id: 'floornav',
  base: 'top',
  isToggleShow: false,
  ...
});

The API

Options

keydescriptiondefaultoptions
idthe id of the floor elementundefinedstring
containerscroll containerwindowwindow / string
basebaseline0top/ center/ bottom
thresholdthreshold0number
scrollOffsetthe offset from baseline0number
activeClassthe active class of the current floor itemactivestring
showClassclass at the floor displayshowstring
isToggleShowWhether the floor disappears with the contenttrueboolean
1.0.4

5 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago