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>
    <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 menu = document.querySelector('#navbar');
      const scrollspy = VanillaScrollspy({ menu });
      scrollspy.init();
    </script>
  </body>
</html>