simple-scrollspy12 v2.0.3
Simple Scrollspy
Simple scrollspy is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 1.94Kb.
This is a scrollspy demo for my menu in the navigation bar.
Install
- Via NPM:
Install NPM package - https://www.npmjs.com/package/simple-scrollspy12:
npm install simple-scrollspy12
- The other way, you also can inject
simple-scrollspy.min.js
file into your HTML code:
<script src="/path/to/dist/simple-scrollspy.min.js"></script>
Usages
Easy for using, syntax just like this:
scrollSpy(menuElement, options)
This little plugin will add active
class into your existing menu item when you scroll your page to a matched section by ID.
If you are giving it a try, make sure that you:
1. Added CSS for active
class in your menu item. Because, this plugin do NOT include CSS.
2. Added ID for your sections.
Example: <section id="first-section">...</section>
3. Added an attribute which is an section ID into your menu items. Default is href
.
Example: "href"="#first-section"
.
You also replace href
with the other name by hrefAttribute
in options
.
Arguments
- The
menuElement
is query selector to your menu. It isString
orHTMLElement
instance. - The
options
is optional. It is type ofObject
which contains properties below:
Name | Type | Default | Description |
---|---|---|---|
sectionClass | String | .scrollspy | Query selector to your sections |
menuActiveTarget | String | li > a | Element will be added active class |
offset | Number | 0 | Offset number |
hrefAttribute | String | href | The menu item's attribute name which contains section ID |
activeClass | String | active | Active class name will be added into menuActiveTarget |
ES6 example
import scrollSpy from 'simple-scrollspy'
const options = {
sectionClass: '.scrollspy', // Query selector to your sections
menuActiveTarget: '.menu-item', // Query selector to your elements that will be added `active` class
offset: 100 // Menu item will active before scroll to a matched section 100px
}
// init:
scrollSpy(document.getElementById('main-menu'), options)
// or shorter:
scrollSpy('#main-menu', options)
Inject static file
<script src="/path/to/dist/simple-scrollspy.min.js"></script>
<script>
window.onload = function () {
scrollSpy('#main-menu', {
sectionClass: '.scrollspy',
menuActiveTarget: '.menu-item',
offset: 100
})
}
</script>
Development
$ yarn install
$ yarn dev
Build
$ yarn build
or:
$ npm run build
The dist
folder is automatically created and include file simple-scrollspy.min.js
Note
- Let feel free to make a pull request if you can. Or just create the issues when you got it.
- Don't forget give it a star if you feels it is really helpfull for us. It may save somebody in someday.
Helpful links
Licence
3 years ago