Scrollspy broken when using non-list-based navbar markup

Created by: secondstreetmedia

According to the documentation (http://v4-alpha.getbootstrap.com/components/navbar/), navbar implementation can be simplified from:

<nav class="navbar navbar-light bg-faded">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
</nav>

to:

<nav class="navbar navbar-light bg-faded">
  <div class="nav navbar-nav">
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link" href="#">About</a>
  </div>
</nav>

However, unless I'm missing something, which is entirely possible, doing so appears to break Scrollspy, as the menu items no longer highlight.

Using the initial navbar implementation: https://jsbin.com/dekakunuha/edit?html,css,js,output

Using the simplified implementation: https://jsbin.com/viyexurala/edit?html,css,js,output

Thanks, Tim