vs

vanillajs-scrollspy

ScrollSpy in pure JavaScript

Showing:

Popularity

Downloads/wk

68

GitHub Stars

32

Maintenance

Last Commit

3mos ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

VanillaJS ScrollSpy

Build Status

ScrollSpy in pure JavaScript.

Browser Support

IEChromeFirefoxOperaSafari
IE 10+ ✔Latest ✔Latest ✔Latest ✔Latest ✔

Installation

$ npm install vanillajs-scrollspy --save

How to use

const scrollspy = VanillaScrollspy(menu, speed, easing);
scrollspy.init();
  • menu: menu selector (#id, .class, ...)
  • speed (optional): scroll speed, default value 2000
  • easing (optional): scroll type 'easeOutSine', 'easeInOutSine' or 'easeInOutQuint', default value 'easeInOutQuint'

ES6

import VanillaScrollspy from 'vanillajs-scrollspy';

const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar);
scrollspy.init();

CommonJS

const VanillaScrollspy = require('vanillajs-scrollspy').default;

const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar);
scrollspy.init();

UMD in Browser

<!-- to import non-minified version -->
<script src="./dist/vanillajs-scrollspy.js"></script>

<!-- to import minified version -->
<script src="./dist/vanillajs-scrollspy.min.js"></script>

After that the library will be available to the Global as VanillaScrollspy. Follow an example:

const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar);
scrollspy.init();

Examples

Basic template

Available in examples/index.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>VanillaJS ScrollSpy</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <style>
      html, body {
        height: 100%;
      }
      .navbar-brand > .navbar-item {
        font-size: 20px;
        font-weight: bold;
      }
      .navbar-menu .navbar-item {
        font-size: 14px;
        transition: background-color .26s, color .26s;
      }
      .navbar-menu .navbar-item.active {
        background-color: #222;
        color: red;
      }
      .page {
        height: 100%;
        padding: 80px 0;
        width: 100%;
      }
      .page:nth-child(odd) { background-color: #ddd; }
      .page:nth-child(even) { background-color: #fff; }
    </style>
  </head>

  <body>
    <nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
      <div class="container">
        <div class="navbar-brand">
          <a title="VanillaJS ScrollSpy" class="navbar-item">VanillaJS ScrollSpy</a>

          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>

        <div id="navbar" class="navbar-menu navbar-scroll">
          <div class="navbar-start">
            <a href="#home" title="Home" class="navbar-item active">Home</a>
            <a href="#portfolio" title="Portfolio" class="navbar-item">Portfolio</a>
            <a href="#about" title="About" class="navbar-item">About</a>
            <a href="#contact" title="Contact" class="navbar-item">Contact</a>
          </div>
        </div>
      </div>
    </nav>

    <section id="home" class="page">
      <div class="container">
        <h2 class="title">Home</h2>
      </div>
    </section>

    <section id="portfolio" class="page">
      <div class="container">
        <h2 class="title">Portfolio</h2>
      </div>
    </section>

    <section id="about" class="page">
      <div class="container">
        <h2 class="title">About</h2>
      </div>
    </section>

    <section id="contact" class="page">
      <div class="container">
        <h2 class="title">Contact</h2>
      </div>
    </section>

    <script src="./dist/vanillajs-scrollspy.min.js"></script>
    <script>
      const navbar = document.querySelector('#navbar');
      const scrollspy = VanillaScrollspy(navbar);
      scrollspy.init();
    </script>
  </body>
</html>

Controlling the speed

Choose a number greater than or equal to 1.

const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar, 1000);
scrollspy.init();

Changing scroll type

const navbar = document.querySelector('#navbar');
const scrollspy = VanillaScrollspy(navbar, 1000, '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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100