Geek Answers Handbook

Twitter-Bootstrap Scrollspy

I am attached to the implementation of Twitter-Bootstrap Scrollspy in the menu, so when the user scrolls to the page section, the css class changes. This turned out to be unsatisfactory. I already use affix code from code that works great.

So, from my code below, when the user scrolls the LI element in #ScrollSpyContent , I want to change the .product_submenu_image class to .product_submenu_active .

How can i do this?

(I use jsp in java , so there might be some java code here. I tried to cut most of it.)

Thanks.

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');*/ }
+4
source share
1 answer

So, you need to use the spyl spy activate event described here: http://twitter.github.com/bootstrap/javascript.html#scrollspy

Basically, you need a code like this:

 $(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 }); });

Here is a working example: http://jsfiddle.net/hajpoj/f2z6u/3/

please ignore the fact that it starts at the bottom ... not sure if this is an unrelated or related error, but most importantly, you can see how the activation action works

0
source

More articles:


All Articles