javascript - Twitter bootstrap scrollspy -

javascript - Twitter bootstrap scrollspy -

hello i'm trying create scrollspy using twitter bootstrap code not working, when scroll section active class doesn't alter on li elements. here i've done can tell me mistake?

<div id="top" class="navbar-fixed-top "> <nav id="menu" class="col-md-7 navbar pull-left" role="navigation"> <ul class="nav navbar"> <li class="active"><a href="#story">story</a></li> <li ><a href="#food">food</a></li> <li ><a href="#watch">watch</a></li> <li ><a href="#contact">contact</a></li> </ul> </nav><!--end navbar--> <div class="ramka"></div> </div> <div class="wrap col-md-8" data-spy="scroll" data-target="#menu"> <div class="content"> <div class="inside"> <div id="story"> <h3>story</h3> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="food"> <h3>food</h3> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="watch"> <h3>watch</h3> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="contact"> <h3>contact</h3> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="hire"> <p>hire us!<br> , <span style="color: #7dde00">call</span> on 28354935895<br> <span style="color: #7dde00">email</span> contact@losdezerteros.co.uk<br> or come <span style="color: #7dde00">visit</span> on xxx street <br> london, wv32nq </p> </div> </div> </div> </div>

http://jsfiddle.net/52vtd/6629/

javascript jquery html css twitter-bootstrap