jQuery Bootstrap ScrollSpyが動作しません

Question

ScrollSpy Bootstrapプラグインを試していますが、正しく動作していません。下のコードを参照してください、それは常に最後の項目を強調表示します。

http://jsfiddle.net/bRYMC/

<nav id="navbar"> 
    <ul class="nav"> 
    <li><a href="#page1">Page 1</a></li> 
    <li><a href="#page2">Page 2</a></li> 
    <li><a href="#page3">Page 3</a></li> 
    <li><a href="#page4">Page 4</a></li> 
    <li><a href="#page5">Page 5</a></li> 
    </ul> 
</nav> 

<div data-spy="scroll"> 
    <section id="page1" class="page"> 
    <h1>Page 1</h1> 
    </section> 

    <section id="page2" class="page"> 
    <h1>Page 2</h1> 
    </section> 

    <section id="page3" class="page"> 
    <h1>Page 3</h1> 
    </section> 

    <section id="page4" class="page"> 
    <h1>Page 4</h1> 
    </section> 

    <section id="page5" class="page"> 
    <h1>Page 5</h1> 
    </section> 
</div> 

あなたは私を助けることができますか？

Answer 1

bodyタグにdata-spy="scroll"を設定すると正常に動作します。更新されたjsFiddleを確認してください。

Answer 2

data-spy="scroll"タグの隣にdata-target="#navbar"と設定してください。