Demonstration of problem with scrollspy in bootstrap v4

in this example the mainstream bootstrap.js (scrollspy.js) is used.

HTML

<link rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">
      <ul id="toc" class="nav nav-pills nav-stacked">
        <li>
          <a href="#v1" class="nav-link">Volume 1</a>
          <ul class="nav">
            <li>
              <a href="#ch-1-1" class="nav-link">Chapter 1.1</a>
            </li>
            <li>
              <a href="#ch-1-2" class="nav-link">Chapter 1.2</a>
            </li>
            <li>
              <a href="#ch-1-3" class="nav-link">Chapter 1.3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#v2" class="nav-link">Volume 2</a>
          <ul class="nav">
            <li>
              <a href="#ch-2-1" class="nav-link">Chapter 2.1</a>
            </li>
            <li>
              <a href="#ch-2-2" class="nav-link">Chapter 2.2</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-xs-9">
      <h1 id="v1">Volume 1</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod ut enim nec porta. Mauris ac metus semper, eleifend dolor quis, mollis nisi. Fusce non posuere felis. Praesent commodo purus orci, eu commodo turpis tempus sed. Quisque vel gravida
        velit. Aenean vel ligula eget dolor accumsan pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean nec leo ut nulla semper auctor vel at enim. Mauris blandit blandit convallis. Morbi fermentum
        eu sem eget ullamcorper.
      </p>
      <h2 id="ch-1-1">Chapter 1.1</h2>
      <p>
        Nam iaculis ornare metus non porttitor. Quisque pellentesque libero non laoreet vestibulum. Maecenas non tristique tortor, et rhoncus ligula. Integer...

CSS

body {
  position: relative;
}

#toc {
  position: fixed;
}

ul#toc ul {
  margin-left: 1em;
}

ul#toc ul .nav-link.active {
  background-color: teal;
}

JavaScript

$('body').scrollspy({
  target: '#toc'
})