vanillajs-scrollspy

    2.2.0 • Public • Published

    VanillaJS ScrollSpy

    Build Status

    ScrollSpy in pure JavaScript.

    Browser Support

    IE Chrome Firefox Opera Safari
    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

    Keywords

    Install

    npm i vanillajs-scrollspy

    DownloadsWeekly Downloads

    94

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    43.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • ederssouza