如何在Twitter中使用Affix組件Bootstrap 2.1.1

我正在嘗試使用下面的documented steps的twitter引導程序的最新版本中的添加組件，並且我無法正常工作。這裏是JsFiddle 如何在Twitter中使用Affix組件Bootstrap 2.1.1

的例子中，我看到兩個問題

正確點擊鏈接sidenav滾動到合適的內容，但滾動內容不作適當sidenav鏈接活躍
的sidenav沒有風格爲引導website。

我將不勝感激，如果有人幫助得到這個工作，如在twitter引導站點。

來源

2012-09-17 Raja

對於第一個問題，我認爲你必須手動設置鏈接的類爲'激活'時clicke d。 – c0deNinja

您正在尋找一個ScrollSpy。當您滾動或切換到適當的部分時，它突出顯示一個菜單項。

以某種方式，詞綴可以替代實驗CSS position:sticky。當您從頂部滾動n px時，它會將菜單position從static更改爲fixed。

來源

2012-09-17 21:38:35 Pavlo

有關詞綴的文檔令人困惑，因爲它描述了詞綴「左側的子導航是詞綴插件的實時演示」。而這次導航甚至更多的是滾動的例子。

我很像喜歡在引導實況子導航到一個小的jsfiddle在

http://jsfiddle.net/citykid/Gb2SD/6/

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="span2" id="navparent"> 
       <ul class="nav nav-list navex" data-spy="affix"> 
        <li><a href="#o">overview</a> 
        </li> 
        ... 
       </ul> 
      </div> 
      <div class="span9"> 
       <p>top of the document</p> 
       <h3 id="o" data-offset-top="200">Overview</h3> 
       <div style="height:500px">dummy content overview</div> 
       ... 
      </div> 
     </div> 
    </div> 
    <script src="/js/jquery-1.9.0.js"></script> 
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script> 
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script> 
    <script> 
     $(document).ready(function() { 
      $(document.body).scrollspy({ 
       target: "#navparent" 
      }); 
     }); 
    </script> 
</body>

使用JS API，而不是數據的屬性，否則你會遇到描述錯誤在jsfiddle.net/citykid/Gb2SD/4

來源

2013-02-07 17:50:23 citykid

如何在Twitter中使用Affix組件Bootstrap 2.1.1

回答

相關問題