scroll-active
Version:
A lightweight lib for making navigation elements active as you scroll.
121 lines (89 loc) • 3.98 kB
Markdown
# scroll-active
[](https://www.npmjs.com/package/scroll-active)
[](https://github.com/shalldie/scroll-active)
[](https://github.com/shalldie/scroll-active/actions)
A lightweight lib for making navigation elements active as you scroll.
在滚动时激活对应导航的轻量级库。
## Related
[v-scroll-active][v-scroll-active]: A version of vue component. Vue 版本。
## Live Demo
[live demo](https://shalldie.github.io/demos/scroll-active/)
## Installation
npm install scroll-active --save
## Usage
```html
<!-- nav bar -->
<div class="navbar">
...
<span data-scroll-active="menuOne">menu one</span>
</div>
<!-- main page -->
<div class="container">
...
<div id="menuOne"></div>
</div>
```
```ts
// window
// const ScrollActive = window['ScrollActive'];
// commonjs like
// const ScrollActive = require('scroll-active');
// es module, typescript
import ScrollActive from 'scroll-active';
new ScrollActive({
activeClass: 'active', // 激活导航使用的 class
offset: 0, // 触发 active 元素的偏移量
hash: false, // 点击变更导航后，改变 hash
update(id) {
// hook: 当 active id 改变当时候触发
}
});
```
Add `data-scroll-active` to the navigation menu and assign an element id. When the page scrolls to the element, it will add `active` to the class of the navigation menu.
At the same time, clicking the navigation menu will also make the page scroll to the corresponding element position.
在导航菜单上添加 `data-scroll-active` ，赋值一个元素 id，在页面滚动到该元素的时候，就会给导航菜单的 class 添加 `active`。
同时点击该导航菜单也会让页面滚动到对应元素位置。
## Options
| name | type | default | description |
| :---------- | :--------: | :---------: | :----------------------------------------------------------------------------------------- |
| activeClass | `string` | `active` | class used for navigation activation <br> 导航激活时使用的 class |
| offset | `number` | `0` | offset used to activate navigation <br> 距离激活导航使用的偏移量 |
| hash | `boolean` | `false` | offset used to activate navigation <br> 距离激活导航使用的偏移量 |
| update | `Function` | `undefined` | callbacks triggered when a navigation change is active <br> 在激活的导航变更时，触发的回调 |
## Dispose
Sometimes you are using an `mvvm` lib, such as `react` or `vue`, you may need to call the `dispose` function and renew `ScrollActive`, if the nav items change.
在使用一些 `mvvm` 库的时候，如果组件的更新会影响导航元素，需要去释放资源并重新初始化该组件。
example:
```js
// react:
class ReactComponent extends React {
componentDidMount() {
this.sa = new ScrollActive();
}
componentDidUpdate() {
this.sa.dispose();
this.sa = new ScrollActive();
}
componentWillUnmount() {
this.sa.dispose();
}
}
```
Here is a version for vue: [v-scroll-active][v-scroll-active]
```js
// vue:
export default {
mounted() {
this.sa = new ScrollActive();
},
updated() {
this.sa.dispose();
this.sa = new ScrollActive();
},
beforeDestroy() {
this.sa.dispose();
}
};
```
## Enjoy it! :D
[v-scroll-active]: https://github.com/shalldie/scroll-active/tree/master/packages/v-scroll-active