https://github.com/sidsbrmnn/scrollspy
A lightweight JavaScript library to automatically update navigation components based on scroll position indicating the currently active link in the viewport.
https://github.com/sidsbrmnn/scrollspy
hacktoberfest javascript lightweight-javascript-library navigation scrollspy
Last synced: 8 months ago
JSON representation
A lightweight JavaScript library to automatically update navigation components based on scroll position indicating the currently active link in the viewport.
- Host: GitHub
- URL: https://github.com/sidsbrmnn/scrollspy
- Owner: sidsbrmnn
- License: mit
- Created: 2020-06-21T14:56:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-30T23:54:34.000Z (over 1 year ago)
- Last Synced: 2025-03-18T06:08:41.156Z (9 months ago)
- Topics: hacktoberfest, javascript, lightweight-javascript-library, navigation, scrollspy
- Language: JavaScript
- Homepage: https://sidsbrmnn.github.io/scrollspy
- Size: 1.36 MB
- Stars: 39
- Watchers: 1
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @sidsbrmnn/scrollspy
[](https://badge.fury.io/js/@sidsbrmnn%2Fscrollspy)
A simple lightweight JavaScript library without jQuery or any other dependencies to handle scroll spying on static webpages.
## Install
1. via NPM
Install it using npm
```bash
npm install --save @sidsbrmnn/scrollspy
```
2. Use the minified script from unpkg.com
```html
```
## Usages
Easy for using, syntax just like this:
```html
scrollSpy(menu, 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. Create your sections.
Example: `...`
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
1. The `menu` is query selector to your menu. It is `string` or `HTMLElement` instance.
2. The `options` is optional. It is type of `object` which contains properties below:
| Name | Type | Default | Description |
|--------------------|:---------|:--------------|:-----------------------------------------------------------------------------------------------------------------|
| `sectionSelector` | string | `section` | Query selector to your sections |
| `targetSelector` | string | `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 `targetSelector` |
| `onActive` | function | null | A callback method that's called with the current menuItem and section `onActive: function(menuItem, section) {}` |
### ES6
```js
import scrollSpy from '@sidsbrmnn/scrollspy'
const options = {
sectionSelector: 'section', // Query selector to your sections
targetSelector: '.nav-link', // Query selector to your elements that will be added `active` class
offset: 100 // Menu item will active before scroll to a matched section 100px
}
// Initialize
scrollSpy(document.getElementById('navMain'), options)
// Shorter way
scrollSpy('#navMain', options)
```
### Script tag
```html
window.onload = function () {
scrollSpy('#navMain', {
sectionSelector: 'section',
targetSelector: '.nav-link',
offset: 100
});
}
```
## Licence
[MIT](LICENSE)