https://github.com/ederssouza/vanillajs-scrollspy
ScrollSpy in pure JavaScript
https://github.com/ederssouza/vanillajs-scrollspy
javascript pure-javascript scroll scrollable scrollmagic scrollspy
Last synced: 6 months ago
JSON representation
ScrollSpy in pure JavaScript
- Host: GitHub
- URL: https://github.com/ederssouza/vanillajs-scrollspy
- Owner: ederssouza
- License: mit
- Created: 2017-08-20T00:06:54.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-11-04T21:57:25.000Z (over 1 year ago)
- Last Synced: 2024-05-08T06:02:13.391Z (about 1 year ago)
- Topics: javascript, pure-javascript, scroll, scrollable, scrollmagic, scrollspy
- Language: JavaScript
- Homepage:
- Size: 542 KB
- Stars: 56
- Watchers: 3
- Forks: 20
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# VanillaJS ScrollSpy
   
ScrollSpy in pure JavaScript.
## Installation
```bash
$ npm install vanillajs-scrollspy --save
```
## How to use
- **menu:** HTML selector (#id, .class, ...)
- **speed (optional):** scroll speed, default value `2000`
- **easing (optional):** scroll type `'easeOutSine'`, `'easeInOutSine'` or `'easeInOutQuint'`, default value `'easeOutSine'`
### ES6
```javascript
import VanillaScrollspy from 'vanillajs-scrollspy'
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu })
scrollspy.init()
```
### UMD in Browser
```html
```
After that the library will be available to the Global as `VanillaScrollspy`. Follow an example:
``` javascript
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu })
scrollspy.init()
```
## Examples
### Basic template
Available in [`public/index.html`](public/index.html).
``` html
VanillaJS ScrollSpy
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
nav {
position: fixed;
left: 0;
right: 0;
top: 0;
}
nav a.active {
font-weight: bold;
}
.page {
height: 100%;
padding: 80px 0;
width: 100%;
background-color: #ddd;
}
.page:nth-child(even) { background-color: #fff; }
Home
Portfolio
About
Contact
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu })
scrollspy.init()
```
### Controlling the speed
Choose a number greater than or equal to 1.
``` javascript
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu, speed: 1000 })
scrollspy.init()
```
### Changing scroll type
``` javascript
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu, speed: 1000, easing: 'easeInOutQuint' })
scrollspy.init()
```
## Contributing
Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/ederssouza/vanillajs-scrollspy/tags).
## Authors
See also the list of [contributors](https://github.com/ederssouza/vanillajs-scrollspy/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details