Author: | aashishpanthi |
---|---|
Views Total: | 1,440 views |
Official Page: | Go to website |
Last Update: | January 16, 2021 |
License: | MIT |
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; }