Twitter-Bootstrap Scrollspy

Estoy tratando de implementar Twitter-Bootstrap Scrollspy en un menu para que cuando el usuario se desplaza a una sección de la página, la class css se modifique. Esto ha demostrado ser más que frustrante. Ya estoy usando el código de afijo del código que funciona muy bien.

Entonces, de mi código a continuación cuando un usuario se desplaza al elemento LI de #ScrollSpyContent , quiero cambiar la class de .product_submenu_image a .product_submenu_active .

¿Cómo puedo hacer esto?

(Estoy usando jsp's en java así que podría ser un código Java aquí. Intenté eliminar la mayor parte).

Gracias.

HTML:

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="/css/bootstrap.css"/> <link rel="stylesheet" href="/css/bootstrap-responsive.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> </head> <body> <header></header> <div class="row-fluid product_submenu"> <nav class="span10 offset1"> <ul class="productmenus"> <li><a href="#product_features"><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/>&nbsp;Product Features</div></a></li> <li><a href="#gettingstarted"><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/>&nbsp;Getting Started</div></a></li> <li><a href="#product_support"><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/>&nbsp;Product Support</div></a></li> </ul> </nav> </div> <div class="container-fluid"> <nav class="row-fluid" > <ul class="span10 offset1" data-spy="scroll"> <li class="row-fluid" id="product_features"></li> <!-- End Product Features --> <li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started --> <li class="row-fluid" id="product_support"></li><!-- End Product support --> </ul> </nav> </div> <footer></footer> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="/js/bootstrap.js"></script> <script> $(function() { var $spy = $('.productmenus'); $spy.scrollspy({offset: 20}); $spy.bind("activate", function(e) { //e.target is the current <li> element var header = $(e.target).find(".product_submenu_image"); $(header).addClass('active'); }); }); </script> </body> </html> 

CSS:

 .product_submenu_image { background: url('../img/product_tab_default.gif'); max-height: 100%; padding: 18% 0 18% 0; border: none; } .product_submenu_image.active { background: blue; /*background: url('../img/product_tab_selected.gif');*/ } 

Por lo tanto, debe utilizar el evento de activate espiar scroll que se describe aquí: http://twitter.github.com/bootstrap/javascript.html#scrollspy

Básicamente, necesitas un código como ese:

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

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/hajpoj/f2z6u/3/

por favor ignore el hecho de que comienza en la parte inferior … no estoy seguro de si ese error no está relacionado o relacionado, pero el punto principal es que puede ver cómo funciona el evento de activación