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-targetID，#product-nav，以尝试使用父div的ul而不是 - 。类而不是IDS（对于
data-target）。 - 试图从IDS
- 经过去除连字符，以查看是否scrollspy被列入bootstrap.js文件
- 检查控制台错误
我想我已经用尽了我的努力，显然我失去了一些东西简单，如果我甚至不能让它在拨弄工作。我没有看到.active类被分配给任何导航元素。
答
@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>
答
下面是一个如何做到这一点的例子。我建议至少使用一些预定义的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>