Active link scrollspy boot disk not applicable

Question

Fiddle: http://jsfiddle.net/bVLBL/

The active class does not apply to the corresponding link. Any ideas how to fix this?

HTML:

<div data-spy="scroll" data-target="#navbar">
    <div id="navbar" data-spy="affix" class="sticky-nav">
        <ul class="nav inline">
            <li><a href="#introduction">Introduction</a></li>
            <li><a href="#products">Products</a></li>
            <li><a href="#company">Company</a></li>
        </ul>
    </div>
    <div class="sections"> 
        <section id="introduction" name="introduction">Test1</section>
        <section id="products" name="products">Test2</section>
        <section id="company" name="company">Test3</section>
    </div>
</diV>

Answer 1

This seems to work if you assign the data-spy and data-target attributes to the body tag instead of the containing div.

http://plnkr.co/edit/O1244QqRJEOcRfXCCk5J