我有一个bootsply设置来证明这个问题。问题是导航链接没有正确获得活动状态。如果向下滚动页面，“Getting started”li项应该变为粗体但不是。只有“Font awesome”li项才有效。最后一个链接“Bootstrap”也没有点击它的粗体。
CSS：
header {
height: 365px;
background: url("http://i.imgur.com/wU2YhOJ.png");
background-color: #262626;
background-size: cover;
background-position: center;
}
header h1{
font-family: Montserrat, sans-serif !important;
font-size: 5.5em;
color: white;
word-break: normal;
padding-top: 115px;
}
body h1 {
font-family: 'Lato', sans-serif;
line-height: 72px;
}
body, footer { font-family: 'Open Sans', sans-serif !important; }
body p { line-height: 28px; }
footer { background-color: #262626; }
.affix {
top: 0px;
}
/* sidebar */
.bs-docs-sidebar {
padding-left: 20px;
margin-top: 60px;
margin-bottom: 20px;
}
/* all links */
.bs-docs-sidebar .nav>li>a {
color: #999;
border-left: 2px solid transparent;
padding: 4px 20px;
font-size: 13px;
font-weight: 400;
}
/* nested links */
.bs-docs-sidebar .nav .nav>li>a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
font-size: 12px;
}
/* active & hover links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>li>a:hover,
.bs-docs-sidebar .nav>li>a:focus {
color: #262626;
text-decoration: none;
background-color: transparent;
border-left-color: #262626;
}
/* all active links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
font-weight: 600;
}
/* nested active links */
.bs-docs-sidebar .nav .nav>.active>a,
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
font-weight: 400;
}
/* hide inactive nested list */
.bs-docs-sidebar .nav ul.nav {
display: none;
}
/* show active nested list */
.bs-docs-sidebar .nav>.active>ul.nav {
display: block;
}
/* special back to top styling */
.back-to-top:hover,
.back-to-top:focus{
border-left-color: transparent !important;
}
@media all and (max-width: 1170px) {
.bs-docs-sidebar {
display: none;
}
}
@media all and (max-width: 970px) {
#body-middle {
float: none;
margin: 0 auto;
}
}
HTML：
<header id="header">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center"><span class="">Theme guide</span></h1>
</div>
</div>
</div>
</header>
<div class="container" id="body-content">
<div class="row">
<div class="col-md-2" id="body-left"></div>
<div class="col-xs-11 col-md-8" id="body-middle">
<br class="">
<section>
<div id="getting-started" class="">
<h1 class="">Getting started</h1>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Etiam accumsan
lectus ornare libero iaculis cursus. Ut imperdiet sollicitudin massa in
posuere. In vel mi lacus. In hac habitasse platea dictumst. Morbi ultrices
turpis non molestie ornare.</p>
</div>
</section>
<section>
<div id="font-awesome" class="">
<h1 class="">Font awesome</h1>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar.</p>
</div>
<div id="font-awesome-sub1" class="">
<h3 class="">Sub section</h3>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
tempor pulvinar.</p>
</div>
<div id="font-awesome-sub2" class="">
<h3 class="">Sub section</h3>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
tempor pulvinar.</p>
</div>
</section>
<section>
<div id="bootstrap" class="">
<h1 class="">Bootstrap</h1>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
tempor pulvinar.</p>
</div>
<div id="bootstrap-sub1" class="">
<h3 class="">Sub section</h3>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
tempor pulvinar.</p>
</div>
<div id="bootstrap-sub2" class="">
<h3 class="">Sub section</h3>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
tempor pulvinar.</p>
</div>
<div id="bootstrap-sub3" class="">
<h3 class="">Sub section</h3>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
tempor pulvinar.</p>
</div>
</section>
</div>
<div class="col-md-2 hidden-md" id="body-right">
<div data-spy="affix" data-offset-top="365" data-offset-bottom="200" class="">
<nav class="bs-docs-sidebar">
<ul id="sidebar" class="nav nav-stacked fixed">
<li> <a href="#getting-started" class="">Getting Started</a>
<ul class="nav nav-stacked">
<li><a href="#GroupASub1" class="">Sub-Group 1</a>
</li>
<li><a href="#GroupASub2" class="">Sub-Group 2</a>
</li>
</ul>
</li>
<li> <a href="#font-awesome" class="" contenteditable="false">Font Awesome</a>
<ul class="nav nav-stacked">
<li><a href="#font-awesome-sub1" class="">Sub-Group 1</a>
</li>
<li><a href="#font-awesome-sub2" class="">Sub-Group 2</a>
</li>
</ul>
</li>
<li> <a href="#bootstrap" class="" contenteditable="false">Bootstrap</a>
<ul class="nav nav-stacked">
<li><a href="#bootstrap-sub1" class="">Sub-Group 1</a>
</li>
<li><a href="#bootstrap-sub2" class="">Sub-Group 2</a>
</li>
<li><a href="#bootstrap-sub3" class="">Sub-Group 3</a>
</li>
</ul>
</li>
<li><span class=""> </span>
</li>
<li> <a class="back-to-top" href="#header">Back to top</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<footer>
<p class="text-center">Prepared by xxx. 2014</p>
</footer>
JS：
$('body').scrollspy({
target: '#sidebar',
offset: 40
});
答案 0 :(得分：2)
<ul id="sidebar" class="nav nav-stacked fixed">
<li> <a href="#getting-started" class="">Getting Started</a>
<ul class="nav nav-stacked">
<li><a href="#GroupASub1" class="">Sub-Group 1</a>
</li>
<li><a href="#GroupASub2" class="">Sub-Group 2</a>
</li>
</ul>
由于主html中没有子组部分，因此未添加入门中的活动选择器。如果你添加它，它的工作原理。只有当你滚动到sub时才看到这里，活动出现在侧边栏的主要li上。http://www.bootply.com/Hrs2sw3uGj#这也适用于boostrap链接。你必须滚动更多才能激活它！
答案 1 :(得分：1)
您可以将侧栏标识放在导航标记上。引导滚动间谍将使其成为目标，以便您可以实现您想要做的事情。
<nav id="sidebar" class="bs-docs-sidebar">