Scrollspy broken when using non-list-based navbar markup

[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

[cvrebert]

@secondstreetmedia Try JS Bin instead of JSFiddle.

[secondstreetmedia]

@cvrebert Edited initial post, replacing JSFiddle links with JS Bin links.

[cvrebert]

Reposting to trigger validator: https://jsbin.com/viyexurala/edit?html,css,js,output

[Manuellama]

I noticed this too in https://jsbin.com/dekakunuha/edit?html,css,js,output link:

If there is not enough content height in the page to make the target considered as active,when you choose the last item, this will not allow the content to reach the top of the page, and you will never get the white font to mark it as target, because it is not an active target. The last item will not be marked as active if there is no extra space to place the last item content in the top.

I added extra content after the last item so you can see it here.
https://jsbin.com/qapizoligo/edit?html,css,output

[pvdlg]

X-ref #21807