Author: | LiyanNguyen |
---|---|
Views Total: | 530 views |
Official Page: | Go to website |
Last Update: | February 19, 2022 |
License: | MIT |
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; }