Scrollspy Bootstrap v3.3不起作用

在導航欄上使用Bootstrap v3.3 w/affix。 Affix工作正常，但我無法讓Scrollspy工作。我創建了一個fiddle here（從小提琴中刪除了詞綴），試圖查看它是不是我的JS中的其他東西，或者是不正確的，但小提琴也不工作。Scrollspy Bootstrap v3.3不起作用

下面是例子小提琴：

.product-nav.affix { 
    top: 0; 
    left: 0; 
    z-index: 1; 
    width: 100%; 
    background-color: #555; 
} 

$('.product-nav').affix({ 
     offset: { 
      top: $('.hero').height() 
     } 
}); 

<body data-spy="scroll" data-target="#product-nav"> 
    <header class="hero"> 
     <img src="http://placehold.it/400x1000" /> 
    </header> 
    <div class="section gray no-padd"> 
     <div class="container"> 
      <!-- component --> 
      <div class="product-nav"> 
       <ul class="list-inline spy-product-nav" id="product-nav"> 
        <li><a href="#spy-key-content">Key Content</a> 
        </li> 
        <li><a href="#spy-capabilities">Capabilities</a> 
        </li> 
        <li><a href="#spy-image-carousel">Image Carousel</a> 
        </li> 
        <li><a href="#spy-video">Video</a> 
        </li> 
        <li><a href="#spy-materials">Materials</a> 
        </li> 
        <li><a href="#spy-contact-us">Contact us</a> 
        </li> 
       </ul> 
      </div> 
      <!-- ends component --> 
     </div> 
    </div> 
    <section id="spy-key-content"> 
     <img src="http://placehold.it/300x500" /> 
     <h2>Blah Blah blah</h2> 
    </section> 
</body>

，我已經試過的東西：

去除body標籤data-scroll和data-target和通過JS實現代替。（即 - $('body').scrollspy.....）
移動的section左右（而不是ID的，搬到h2等
試圖移動data-target ID，#product-nav，以嘗試使用父div的ul而不是
。類而不是IDS（對於data-target）。
試圖從IDS
經過去除連字符，以查看是否scrollspy被列入bootstrap.js文件
檢查控制檯錯誤

我想我已經用盡了我的努力，顯然我失去了一些東西簡單，如果我甚至不能讓它在撥弄工作。我沒有看到.active類被分配給任何導航元素。

來源

2015-10-13 Rob Scott

@vanburenx - 您的文章是正確的，但是，我所需要的唯一的事情就是要添加的類別，.nav，到相應的ul元素。

％的自舉文檔：

輕鬆地添加scrollspy行爲，你的頂欄導航，只需添加數據諜=「滾動」到你想窺探元素（最典型的是，這將是身體）和data-target =「。navbar」來選擇要使用的導航。 您需要使用帶有.nav組件的scrollspy。

<div class="product-nav" id="product-nav"> 
    <ul class="list-inline hidden-xs nav"> <--- needed that 
     <li><a href="#spy-key-content">Key Content</a></li> 
     <li><a href="#spy-capabilities">Capabilities</a></li> 
     <li><a href="#spy-image-carousel">Image Carousel</a></li> 
     <li><a href="#spy-video">Video</a></li> 
     <li><a href="#spy-materials">Materials</a></li> 
     <li><a href="#spy-contact-us">Contact us</a></li> 
    </ul> 
</div>

來源

2015-10-16 12:31:16

下面是一個如何做到這一點的例子。我建議至少使用一些預定義的Bootstrap類（尤其是導航鏈接），否則如果您希望鏈接顯示更改爲active，則需要定義所有狀態。

$('#nav').affix({ 
 
    offset: { 
 
    top: $('header').height() 
 
    } 
 
});

body { 
 
    position: relative; 
 
} 
 
header { 
 
    height: 125px; 
 
    font-size: 50px; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 
div#nav.affix { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 10; 
 
} 
 
.navbar.navbar-custom { 
 
    margin-bottom: 0; 
 
} 
 
#section1 { 
 
    padding-top: 50px; 
 
    height: 500px; 
 
    color: #fff; 
 
    background-color: #1E88E5; 
 
} 
 
#section2 { 
 
    padding-top: 50px; 
 
    height: 500px; 
 
    color: #fff; 
 
    background-color: #673ab7; 
 
} 
 
#section3 { 
 
    padding-top: 50px; 
 
    height: 500px; 
 
    color: #fff; 
 
    background-color: #ff9800; 
 
} 
 
#section41 { 
 
    padding-top: 50px; 
 
    height: 500px; 
 
    color: #fff; 
 
    background-color: #00bcd4; 
 
} 
 
#section42 { 
 
    padding-top: 50px; 
 
    height: 500px; 
 
    color: #fff; 
 
    background-color: #009688; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
 
    <header>Header Area</header> 
 
    <div id="nav"> 
 
    <nav class="navbar navbar-inverse navbar-custom navbar-static-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> <a class="navbar-brand" href="#">Brand</a> 
 

 
     </div> 
 
     <div> 
 
      <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#section1">Section 1</a> 
 

 
       </li> 
 
       <li><a href="#section2">Section 2</a> 
 

 
       </li> 
 
       <li><a href="#section3">Section 3</a> 
 

 
       </li> 
 
       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
 

 
       <ul class="dropdown-menu"> 
 
        <li><a href="#section41">Section 4-1</a> 
 

 
        </li> 
 
        <li><a href="#section42">Section 4-2</a> 
 

 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
    <div id="section1" class="container-fluid"> 
 
    <h1>Section 1</h1> 
 

 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </div> 
 
    <div id="section2" class="container-fluid"> 
 
    <h1>Section 2</h1> 
 

 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </div> 
 
    <div id="section3" class="container-fluid"> 
 
    <h1>Section 3</h1> 
 

 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </div> 
 
    <div id="section41" class="container-fluid"> 
 
    <h1>Section 4 Submenu 1</h1> 
 

 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </div> 
 
    <div id="section42" class="container-fluid"> 
 
    <h1>Section 4 Submenu 2</h1> 
 

 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </div> 
 
</body>

來源

2015-10-15 04:59:32 vanburen

Scrollspy Bootstrap v3.3不起作用

回答

相關問題