0.0.1 • Published 5 years ago
mgn-scroll-nav v0.0.1
mgn-scroll-nav ( Don't Need jQuery )
Implement scroll position with linked navigation. If scroll position intrudes the specified content area, assign class="active".
- Target browser : IE9+
Install
npm i mgn-scroll-nav -SOr Download raw data
↓ download "mgn-scroll-nav.js"
Import
import mgnScrollNav from 'mgn-scroll-nav';Constructor
new mgnScrollNav( element [, option] )| Argument | Data type | Default | Descroption |
|---|---|---|---|
| element | String | -(Required) | Specify target element.ex) ".j-scrollnav" |
| option | Object | - | ex)option = {boxElm: ".box",activeElm: ".icon",posFix: "50%",edgeJudge: false} |
| Option | Data type | Default | Descroption |
|---|---|---|---|
| boxElm | String | ".f-section" | Specify element to scroll to. |
| activeElm | String | "li" | Specify which child element of the element specified in element argument to be attached with .active. |
| posFix | Number or String | 0 | Specify the distinctive position (from window) to attach .active.Please use string for % unit and number for px unit. |
| edgeJudge | Boolean | true | Specify whether to attach .active to the last (or first) element when reach the bottom (or first) of page. |
Demo
https://frontend-isobar-jp.github.io/mgn-scroll-nav/
import mgnScrollNav from 'mgn-scroll-nav';
new mgnScrollNav(
".j-scrollnav",
{
boxElm: '.f-box',
activeElm: '.icon',
posFix: '50%',
edgeJudge: false
}
);