ScrollSpy in pure JavaScript.
$ npm install vanillajs-scrollspy --save- menu: HTML selector (#id, .class, ...)
- speed (optional): scroll speed, default value
2000 - easing (optional): scroll type
'easeOutSine','easeInOutSine'or'easeInOutQuint', default value'easeOutSine'
import VanillaScrollspy from 'vanillajs-scrollspy'
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu })
scrollspy.init()<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanillajs-scrollspy.min.js"></script>
<!-- or -->
<script src="./dist/vanillajs-scrollspy.min.js"></script>After that the library will be available to the Global as VanillaScrollspy. Follow an example:
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu })
scrollspy.init()Available in public/index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VanillaJS ScrollSpy</title>
<style>
* {
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; }
</style>
</head>
<body>
<nav id="navbar">
<a href="#home" title="Home" class="active">Home</a>
<a href="#portfolio" title="Portfolio">Portfolio</a>
<a href="#about" title="About">About</a>
<a href="#contact" title="Contact">Contact</a>
</nav>
<section id="home" class="page">
<h2 class="title">Home</h2>
</section>
<section id="portfolio" class="page">
<h2 class="title">Portfolio</h2>
</section>
<section id="about" class="page">
<h2 class="title">About</h2>
</section>
<section id="contact" class="page">
<h2 class="title">Contact</h2>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanillajs-scrollspy.min.js"></script>
<script>
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu })
scrollspy.init()
</script>
</body>
</html>Choose a number greater than or equal to 1.
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu, speed: 1000 })
scrollspy.init()const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu, speed: 1000, easing: 'easeInOutQuint' })
scrollspy.init()Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details