bootstrap scrollspy sidenav不工作 - 最後選擇的項目

我想要一個粘性自我突出顯示sidenav工作，並有一個時間搞清楚我失蹤了。內容包括data-spy =「scroll」data-target =「。sidenav」屬性，但只有sidenav中的最後一項突出顯示，並且沒有一個sidenav項目在滾動時突出顯示。我有一個例子的jsfiddle：bootstrap scrollspy sidenav不工作 - 最後選擇的項目

http://jsfiddle.net/b8JkE/

（所以.sidenav漂浮到左側調整結果窗格的寬度）

繼文檔http://twitter.github.com/bootstrap/javascript.html#scrollspy

的$（」。 sidenav'）是加上（）'ed。 div.sidenav有一個ul/class =「nav nav-tabs nav-stacked」。有一個內容div w/data-spy =「scroll」data-target =「。sidenav」，但在頁面加載時，導航中的最後一項突出顯示，滾動上沒有任何更新。我錯過了什麼？

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="span2 sidenav-parent"> 
     <div class="sidenav"> 
      <ul class="nav nav-tabs nav-stacked"> 
      <li><a href="#a">a</a></li> 
      <li><a href="#b">b</a></li> 
      <li><a href="#c">c</a></li> 
      <li><a href="#d">d</a></li> 
      <li><a href="#e">e</a></li> 
      </ul> 
     </div> 
     </div> 
     <div class="span10" id="gimmelove" data-spy="scroll" data-target=".sidenav"> 
     <h4 id="a">a</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> 
     <h4 id="b">b</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> 
     <h4 id="c">c</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> 
     <h4 id="d">d</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> 
     <h4 id="e">e</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> 
     </div> 
    </div> 
    </div>

CSS：

body { margin-top: 20px; } 
#gimmelove { background-color:#f3f3f3; } 
.sidenav .active a { font-weight:600; background-color:#f3f3f3; }

JS：

$('.sidenav').affix();

來源

2012-11-01 Hal

我只遇到過類似的問題我自己。首先，將data-spy =「scroll」和data-target =「。sidenav」屬性添加到body標籤。在DOM中添加更深的內容時，它無法正常工作，導致nav元素不在添加屬性的位置。

例如

<body data-spy="scroll" data-target=".sidenav" >

其他一個項目需要注意的是，當以定位固定的資產淨值開關，它改變從上方爲A，B，C，d的部分的偏移量，以使得被用於區段之前計算出的位置不再準確。

下面是添加到body標籤的屬性你的例子：http://jsfiddle.net/b8JkE/50/

來源

2012-11-09 09:40:18 nspady

您通常添加data-spy和data-target屬性body標籤。混淆的根源是您可以將這些數據屬性添加到內容周圍的其他元素。事實是，您可以將這些數據屬性添加到頁面內另一個元素上的「間諜」，但是此元素必須具有自己的嵌套滾動條。一個元素不會觸發滾動事件，除非它有自己的滾動條。 Here is your updated JSFiddle where I took your div add added a scrollbar.

另外，您還可以使用JavaScript方法而不是使用數據屬性來連接scrollspy。

所以你有幾個選擇在這裏。

選項1：將data-spy和data-target屬性添加到車身標籤。

<body data-spy="scroll" data-target=".sidenav">

選項2：間諜在頁面內的子元素，但要確保元素都有自己的滾動條。

<div data-spy="scroll" data-target=".sidenav" 
style="overflow-y:scroll; height:200px;">

選項3：調用通過JavaScript scrollspy()方法指定體/滾動元件和目標NAV。

<script> 
     $(function() { 
      $('body').scrollspy({ target: '.sidenav' }); 
     }); 
</script>

這裏是一個演示頁：http://www.lawruk.com/blog/60/twitter-bootstrap-fixed-navigation-with-scrollspy-example

來源

2013-09-09 21:07:05

我有完全相同的問題。我工作圍繞它通過改變的Javascript應用scrollspy()方法的第一錨：

$('#a').scrollspy();

哦，和喜歡的人說，在data-spy和data-target屬性應該是在身體標記爲好。

來源

2013-09-27 00:33:24 starmandeluxe

bootstrap scrollspy sidenav不工作 - 最後選擇的項目

回答

相關問題