Twitter-Bootstrap Scrollspy

我試圖在菜單上實現Twitter-Bootstrap Scrollspy，以便當用戶滾動到頁面的某個部分時，css類會發生變化。這被證明是無法令人沮喪的。我已經在使用代碼很好的代碼了。Twitter-Bootstrap Scrollspy

因此，從我的代碼下面，當用戶滾動到LI元素#ScrollSpyContent我想要更改.product_submenu_image類爲.product_submenu_active。

我該怎麼做？

（我使用的JSP在java所以他們可能會在這裏的一些Java代碼。我試着去掉大部分。）

感謝。

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');*/ 
}

來源

2013-01-15 DaveG

所以你需要使用滾動間諜這裏描述activate事件： http://twitter.github.com/bootstrap/javascript.html#scrollspy

基本上你需要一些代碼，就像這樣：

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

這裏是一個工作示例： http://jsfiddle.net/hajpoj/f2z6u/3/

請忽略它開始在底部...不知道的事實，如果一個不相關或相關的bug ，但重點是你可以看到激活事件是如何工作的

來源

2013-01-16 19:16:28 hajpoj

我已經更新了我的代碼，並提供了一些建議。我一定錯過了一些東西，因爲它仍然不起作用。不工作...意思我看不到有什麼跡象表明有什麼東西在滾動時觸發 – DaveG

所以我注意到了一些事情：（1）你需要在'ul'元素上有'.nav'類，因爲Scrollspy依賴於。（2）因爲你在做什麼，你不需要我的代碼。當scrollspy工作正常時，它會在''li'元素上添加一個'.active'類。所以你可以將你的第二個CSS從'.product_submenu_image.active'改爲'.active .product_submenu_image'。爲了幫助您進行調試，請嘗試使用chrome開發人員工具或firebug來確保將「active」類添加到您的li元素中。我原本以爲你想改變你的*內容*而不是你的*導航* – hajpoj

Twitter-Bootstrap Scrollspy

回答

相關問題