Minimalist Scrollspy Implementation In Pure JavaScript

Preview:

Description:

A minimal scrollspy script that indicates which content sections you’re viewing by updating the styles of nav links on page scroll.

How to use it:

1. Create anchor links pointing to content sections within the document.

<nav class="scrollspy-nav">
  <a class="scrollspy-link" data-target="home">Home</a>
  <a class="scrollspy-link" data-target="about">About</a>
  <a class="scrollspy-link" data-target="services">Services</a>
  <a class="scrollspy-link" data-target="blog">blog</a>
  <a class="scrollspy-link" data-target="contact">Contact</a>
  <span class="scrollspy-indicator"></span>
</nav>
<section class="scrollspy-section" id="home">Home</section>
<section class="scrollspy-section" id="about">About</section>
<section class="scrollspy-section" id="services">Services</section>
<section class="scrollspy-section" id="blog">Blog</section>
<section class="scrollspy-section" id="contact">Contact</section>

2. Place the JavaScript file scrollspy.min.js at the bottom of the document.

<script src="scrollspy.min.js"></script>

3. Highlight the active nav link using your own.

.scrollspy-nav .scrollspy-indicator {
  position: absolute;
  height: 3px;
  width: 0;
  background: red;
  bottom: 0;
  left: 0;
  transition: width 0.3s, left 0.1s;
}