VanillaJS ScrollSpy

GitHub npm npm npm

ScrollSpy in pure JavaScript.

Installation

$ npm install vanillajs-scrollspy --save

How to use

menu: HTML selector (#id, .class, …)
speed (optional): scroll speed, default value 2000
easing (optional): scroll type 'easeOutSine', 'easeInOutSine' or 'easeInOutQuint', default value 'easeOutSine'

ES6

import VanillaScrollspy from 'vanillajs-scrollspy'
const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu })
scrollspy.init()

UMD in Browser

<script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@3.0.7/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()

Examples

Basic template

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/vanillajs-scrollspy@3.0.7/dist/vanillajs-scrollspy.min.js"></script>
    <script>
      const menu = document.querySelector('#navbar')
      const scrollspy = VanillaScrollspy({ menu })
      scrollspy.init()
    </script>
  </body>
</html>

Controlling the speed

Choose a number greater than or equal to 1.

const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu, speed: 1000 })
scrollspy.init()

Changing scroll type

const menu = document.querySelector('#navbar')
const scrollspy = VanillaScrollspy({ menu, speed: 1000, easing: 'easeInOutQuint' })
scrollspy.init()

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details