Minimal Scrollspy Library In Plain JavaScript

Preview:

Description:

A ScrollSpy is a method in which it automatically selects the correct link to highlight or active state of a section on a page, and with just a few lines of code.

In this article, we will be taking a look at how to use JavaScript for this effect, and get it working for our projects.

How to use it:

1. Create a navigation menu that contains anchor links pointing to the different sections as follows:

<header>
  <menu>
    <a class="active" href="#profile">profile</a>
    <a href="#education">education</a>
    <a href="#projects">projects</a>
    <a href="#skills">skills</a>
    <a href="#contact">contact</a>
  </menu>
</header>
<section id="profile">profile</section>
<section id="education">education</section>
<section id="projects">projects</section>
<section id="skills">skills</section>
<section id="contact">contact</section>
<script src="scrollspy.js"></script>

2. The main JavaScript to enable the scrollspy functionality on the menu links:

let section = document.querySelectorAll('section'); // get all <section> elements
let menuLinks = document.querySelectorAll('header menu a'); // get all <a> inside <menu> inside <header> element
let sectionHeight = document.querySelector('section').offsetHeight; // get the height of the top menu
let sectionStartingPointArray = []; // array to store the top-most pixel points of each <section>
let menuLinksArray = []; // array to store the menu elements
// for every <section> element we store their top-most pixel point into an array
section.forEach((sec) => {sectionStartingPointArray.push(sec.offsetTop);});
// for every menu link element we store them in an array
menuLinks.forEach((menuLink) => {menuLinksArray.push(menuLink);});
// call this function everytime we scroll on the browser window
window.onscroll = () => {
	// amount of pixel we have scrolled downwards from the top-most point of the web page
	let downwardScroll = window.scrollY;
	// for every <section>'s top-most point
	sectionStartingPointArray.forEach((sectionStart, sectionIndex) => {
		// check if the current downward scroll is on the middle of each <section>
		// by using its top-most point minus its height divide by half
		if (downwardScroll >= sectionStart - sectionHeight / 2) {
			//if so, we remove all the 'active' classes on all menu links
			menuLinksArray.forEach((menu) => {menu.classList.remove('active');});
			//then add the 'active' class on the corresponding menu depending on which section the scroll is currently at
			menuLinksArray[sectionIndex].classList.add('active');
		}
	});
}

3. Customize the ACTIVE styles.

header menu a.active,
header menu a:hover {
  border-bottom: #ccc .2em solid;
  color: #ccc;
}