VanillaJS ScrollSpy
ScrollSpy in pure JavaScript.
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 10+ |
Latest |
Latest |
Latest |
Latest |
Installation
$ npm install vanillajs-scrollspy --save
How to use
const scrollspy = VanillaScrollspy(menu, speed, easing);
scrollspy.init();
- menu: menu selector (#id, .class, ...)
- speed (optional): scroll speed, default value
2000 - easing (optional): scroll type
'easeOutSine','easeInOutSine'or'easeInOutQuint', default value'easeInOutQuint'
ES6
import VanillaScrollspy from 'vanillajs-scrollspy';
const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar);
scrollspy.init();
CommonJS
const VanillaScrollspy = require('vanillajs-scrollspy').default;
const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar);
scrollspy.init();
UMD in Browser
<!-- to import non-minified version -->
<script src="./dist/vanillajs-scrollspy.js"></script>
<!-- to import minified version -->
<script src="./dist/vanillajs-scrollspy.min.js"></script>
After that the library will be available to the Global as VanillaScrollspy. Follow an example:
const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar);
scrollspy.init();
Examples
Basic template
Available in examples/index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VanillaJS ScrollSpy</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<style>
html, body {
height: 100%;
}
.navbar-brand > .navbar-item {
font-size: 20px;
font-weight: bold;
}
.navbar-menu .navbar-item {
font-size: 14px;
transition: background-color .26s, color .26s;
}
.navbar-menu .navbar-item.active {
background-color: #222;
color: red;
}
.page {
height: 100%;
padding: 80px 0;
width: 100%;
}
.page:nth-child(odd) { background-color: #ddd; }
.page:nth-child(even) { background-color: #fff; }
</style>
</head>
<body>
<nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a title="VanillaJS ScrollSpy" class="navbar-item">VanillaJS ScrollSpy</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="navbar-menu navbar-scroll">
<div class="navbar-start">
<a href="#home" title="Home" class="navbar-item active">Home</a>
<a href="#portfolio" title="Portfolio" class="navbar-item">Portfolio</a>
<a href="#about" title="About" class="navbar-item">About</a>
<a href="#contact" title="Contact" class="navbar-item">Contact</a>
</div>
</div>
</div>
</nav>
<section id="home" class="page">
<div class="container">
<h2 class="title">Home</h2>
</div>
</section>
<section id="portfolio" class="page">
<div class="container">
<h2 class="title">Portfolio</h2>
</div>
</section>
<section id="about" class="page">
<div class="container">
<h2 class="title">About</h2>
</div>
</section>
<section id="contact" class="page">
<div class="container">
<h2 class="title">Contact</h2>
</div>
</section>
<script src="./dist/vanillajs-scrollspy.min.js"></script>
<script>
const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar);
scrollspy.init();
</script>
</body>
</html>
Controlling the speed
Choose a number greater than or equal to 1.
const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar, 1000);
scrollspy.init();
Changing scroll type
const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar, 1000, 'easeInOutQuint');
scrollspy.init();
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE.md file for details
443 Dec 13, 2022
57 Dec 13, 2022
8 Dec 7, 2022
493 Jan 8, 2023
91 Dec 16, 2022
11 Nov 1, 2022
3 May 30, 2022
707 Jan 3, 2023
5 Apr 1, 2022
7 Dec 20, 2022
135 Nov 28, 2022
9 Aug 9, 2022
11 Jun 27, 2022
4 Mar 17, 2022
66 Nov 18, 2022
3 Aug 4, 2022
3 Sep 28, 2022
20 Dec 29, 2022