javascript - bootstrap component's navigation sidebar + animated section indicator -

i've been trying weeks build navigation sidebar these images:

i'm using twitter bootstrap, however, though getbootstrap.com/components has looking navigation sidebar, there no such component in library , pain build one. therefore, resorted using jquery in attempt build 1 tommy hilfiger's global site.

tommy hilfiger's global site

however, i'm new javascript , css... weakpoints... if minified :( , i'm stuck @ trying make arrow marker , have move along (animating) , pointing current section. managed animate page scrolling though, , wip far here:

wip - twitter bootstrap navigation sidebar

is there open source components (or preferably bootstrap ones) achieve section indicator animation?

i'm confused scripts getting messier, open source component highly desireble, however, input on how achieve (with script example please) appreciated.. thank in advance!

check out scrollspy, component exist on bootstrap itself:

bootstrap scrollspy

extracted from:

https://stackoverflow.com/a/14366014/474330

so need use scroll spy activate event described here: http://twitter.github.com/bootstrap/javascript.html#scrollspy

basically need code so:

$(function() {   var $spy = $('.nav.nav-pills');   $spy.scrollspy({offset: 20});   $spy.bind("activate", function(e) {     // stuff here when new section in view   }); }); 

here working example: http://jsfiddle.net/hajpoj/f2z6u/3/

please ignore fact starts @ bottom... not sure if unrelated or related bug, main point can see how activate event works