在导航栏上使用Bootstrap v3.3 w / affix。 Affix工作正常，但我无法让scrollspy工作。我创建了一个fiddle here（从小提琴中移除的词缀），试图看看我的JS或w / e中的其他内容是不是正确的，但小提琴也不起作用。
以下是示例小提琴：
.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>
我尝试过的事情：
data-scroll代码中删除data-target和body
通过JS实现。 （即 - $('body').scrollspy.....）section，移至h2等。data-target ID，#product-nav移至父div
相反，ul。data-target）。我认为我已经筋疲力尽了，显然，如果我甚至无法让它在小提琴上工作，我会遗漏一些简单的东西。我没有看到.active类被分配给任何导航元素。
答案 0 :(得分：1)
以下是如何执行此操作的示例。我建议至少使用一些预定义的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>
答案 1 :(得分：1)
@vanburenx - 您的帖子是正确的，但是，我唯一需要的是将类.nav添加到相应的ul元素。
根据boostrap文档：
要轻松地将scrollspy行为添加到顶部栏导航，只需添加data-spy =＆＃34;滚动＆＃34;你希望窥探的元素（最典型的是身体）和数据目标=＆＃34; .navbar＆＃34;选择要使用的导航。 您希望将scrollspy与.nav组件一起使用。
<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>