在您滚动经过锚点目标之前，活动导航项不会切换
Active nav item doesn't switch until you scroll past the anchor target
我正在使用 navbar-fixed-top，当向下滚动页面时，活动导航项不会切换，直到您滚动过锚点目标。
发生这种情况是因为浏览器在更改活动导航项之前一直在等待，直到锚定目标 "hits" 页面顶部。我希望在锚点目标到达我的导航栏底部时更改活动导航项。
在格式方面没有偏好（将接受任何解决方案）并且请不要 post 任何与填充有关的事情......所做的只是将网页向下推，无论像素多少.. .这不是我要找的解决方案
/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.navbar-default {
background-color: #763f8d;
border-color: #5e2d73;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ecdbff;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ecdbff;
background-color: #5e2d73;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ecdbff;
background-color: #5e2d73;
}
.navbar-default .navbar-toggle {
border-color: #5e2d73;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #5e2d73;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #ecdbff;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Jumbotron
-------------------------------------------------- */
.jumbotron {}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing {
padding-top: 75px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 75px;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
text-align: center;
margin-bottom: 20px;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
}
#team-btn {
padding-top: 25px;
padding-bottom: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0;
/* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px;
/* Vertically center images part 1: add padding above and below text. */
overflow: hidden;
/* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px;
/* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* Footer
-------------------------------------------------- */
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
footer {}
/* Responsive CSS
-------------------------------------------------- */
/* Navigation */
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ecdbff;
background-color: #5e2d73;
}
}
/* Marketing */
@media (min-width: 768px) {
.marketing {
padding-left: 0;
padding-right: 0;
}
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet" />
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="0" id="home">
<header>
<div class="navbar-wrapper">
<div class="container">
<div id="navtop" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">The James Baldwin School</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#faculty">Faculty</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teachers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!--- /.navbar-collapse collapse --->
</div>
<!--- /#navtop --->
</div>
<!-- /.container -->
</div>
<!-- /.navbar wrapper -->
</header>
<!--- JAMES-BALDWIN ========================================================
============================================================================ --->
<a href="http://en.wikipedia.org/wiki/James_Baldwin" target="_blank">
<img src="http://i.huffpost.com/gen/1757925/thumbs/o-JAMES-BALDWIN-facebook.jpg" style="width:100%">
</a>
<div class="image-caption">
</div>
<!--- JUMBOTRON ============================================================
============================================================================ --->
<div class="jumbotron" id="about">
<div class="container">
<div class="text-center">
<h1>The James Baldwin School</h1>
<h2>A School For Expeditionary Learning.</h2>
<p>It is our mission to provide a philosophical and practical education for all students, an education that features creativity and inquiry, encourages habitual reading and productivity, as well as self-reflection and original thought. We agree with
Socrates that the “unexamined life is not worth living,” and it is our desire to prepare students to live thoughtful and meaningful lives. We are committed to inspiring the love of learning in our students.</p>
<p>It is our mission, as well, at the James Baldwin School, to provide a haven for students who have previously experienced school as unresponsive to their needs as individuals. We wish for all students to find their voice and to speak knowledgeably
and thoughtfully on issues that concern their school, their world. We aid students in this endeavor by personalizing our learning situations, by democratizing and humanizing the school environment, and by creating a “talking culture,” an atmosphere
of informal intellectual discourse among students and faculty.</p>
<p>Democratizing the school would be impossible without our Core Values. Our core values help students aquire the important skills needed to continue their journey through life. Most importantly, our core values maintain safety and democracy for
students and faculty.</p>
<a class="btn btn-large btn-danger" href="#">Learn more about Core Values</a>
</div>
</div>
</div>
<!-- Marketing messaging and featurettes ===================================
============================================================================ -->
<div class="container marketing" id="faculty">
<div class="row">
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Brady Smith</h2>
<p>Principal Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Josh Heisler</h2>
<p>Teacher Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Christine Olsen</h2>
<p>Admissions</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Brady Smith</h2>
<p>Principal Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Josh Heisler</h2>
<p>Teacher Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Christine Olsen</h2>
<p>Admissions</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
</div>
<!-- /.row -->
<div id="team-btn">
<div class="text-center">
<a class="btn btn-large btn-danger" href="#">See the rest of Our Team</a>
</div>
<!--- /.text-center --->
</div>
<!--- /.team-btn --->
<!-- START THE FEATURETTES -->
<!--- /END THE FEATURETTES --->
</div>
<!-- /.container marketing -->
<!-- FOOTER -->
<hr>
<div class="container">
<footer class="text-center" id="footer">
<p>This site was created by Isaac Perez.<a href="#"> Back to top.</a>
</p>
<p>Copyright 2014 © The James Baldwin School.
<br>Some Rights Reserved</p>
</footer>
</div>
<!-- /.container -->
<!--- Javascript Bootsrap --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
</body>
自从我上次回答以来，我制作了一个包含 Scrollspy 的网页，但由于我的旧回答不是很有用，所以我替换了它。在 Scrollspy 的 Bootstrap documentation 中，列出的选项之一是数据偏移量，您只需将其添加到您正在监视的元素（在您的情况下为正文）即可轻松使用。在上面的代码中这个属性已经存在，你只需要更改值：
<body data-spy="scroll" data-target=".navbar" data-offset="70" id="home">
<!-- I have found 70px to work well, but you can fiddle around with it to get what you're after -->
我正在使用 navbar-fixed-top，当向下滚动页面时，活动导航项不会切换，直到您滚动过锚点目标。
发生这种情况是因为浏览器在更改活动导航项之前一直在等待，直到锚定目标 "hits" 页面顶部。我希望在锚点目标到达我的导航栏底部时更改活动导航项。
在格式方面没有偏好（将接受任何解决方案）并且请不要 post 任何与填充有关的事情......所做的只是将网页向下推，无论像素多少.. .这不是我要找的解决方案
/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.navbar-default {
background-color: #763f8d;
border-color: #5e2d73;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ecdbff;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ecdbff;
background-color: #5e2d73;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ecdbff;
background-color: #5e2d73;
}
.navbar-default .navbar-toggle {
border-color: #5e2d73;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #5e2d73;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #ecdbff;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Jumbotron
-------------------------------------------------- */
.jumbotron {}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing {
padding-top: 75px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 75px;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
text-align: center;
margin-bottom: 20px;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
}
#team-btn {
padding-top: 25px;
padding-bottom: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0;
/* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px;
/* Vertically center images part 1: add padding above and below text. */
overflow: hidden;
/* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px;
/* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* Footer
-------------------------------------------------- */
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
footer {}
/* Responsive CSS
-------------------------------------------------- */
/* Navigation */
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ecdbff;
background-color: #5e2d73;
}
}
/* Marketing */
@media (min-width: 768px) {
.marketing {
padding-left: 0;
padding-right: 0;
}
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet" />
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="0" id="home">
<header>
<div class="navbar-wrapper">
<div class="container">
<div id="navtop" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">The James Baldwin School</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#faculty">Faculty</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teachers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!--- /.navbar-collapse collapse --->
</div>
<!--- /#navtop --->
</div>
<!-- /.container -->
</div>
<!-- /.navbar wrapper -->
</header>
<!--- JAMES-BALDWIN ========================================================
============================================================================ --->
<a href="http://en.wikipedia.org/wiki/James_Baldwin" target="_blank">
<img src="http://i.huffpost.com/gen/1757925/thumbs/o-JAMES-BALDWIN-facebook.jpg" style="width:100%">
</a>
<div class="image-caption">
</div>
<!--- JUMBOTRON ============================================================
============================================================================ --->
<div class="jumbotron" id="about">
<div class="container">
<div class="text-center">
<h1>The James Baldwin School</h1>
<h2>A School For Expeditionary Learning.</h2>
<p>It is our mission to provide a philosophical and practical education for all students, an education that features creativity and inquiry, encourages habitual reading and productivity, as well as self-reflection and original thought. We agree with
Socrates that the “unexamined life is not worth living,” and it is our desire to prepare students to live thoughtful and meaningful lives. We are committed to inspiring the love of learning in our students.</p>
<p>It is our mission, as well, at the James Baldwin School, to provide a haven for students who have previously experienced school as unresponsive to their needs as individuals. We wish for all students to find their voice and to speak knowledgeably
and thoughtfully on issues that concern their school, their world. We aid students in this endeavor by personalizing our learning situations, by democratizing and humanizing the school environment, and by creating a “talking culture,” an atmosphere
of informal intellectual discourse among students and faculty.</p>
<p>Democratizing the school would be impossible without our Core Values. Our core values help students aquire the important skills needed to continue their journey through life. Most importantly, our core values maintain safety and democracy for
students and faculty.</p>
<a class="btn btn-large btn-danger" href="#">Learn more about Core Values</a>
</div>
</div>
</div>
<!-- Marketing messaging and featurettes ===================================
============================================================================ -->
<div class="container marketing" id="faculty">
<div class="row">
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Brady Smith</h2>
<p>Principal Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Josh Heisler</h2>
<p>Teacher Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Christine Olsen</h2>
<p>Admissions</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Brady Smith</h2>
<p>Principal Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Josh Heisler</h2>
<p>Teacher Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Christine Olsen</h2>
<p>Admissions</p>
<p><a class="btn btn-default" href="#">View details</a>
</p>
</div>
</div>
<!-- /.row -->
<div id="team-btn">
<div class="text-center">
<a class="btn btn-large btn-danger" href="#">See the rest of Our Team</a>
</div>
<!--- /.text-center --->
</div>
<!--- /.team-btn --->
<!-- START THE FEATURETTES -->
<!--- /END THE FEATURETTES --->
</div>
<!-- /.container marketing -->
<!-- FOOTER -->
<hr>
<div class="container">
<footer class="text-center" id="footer">
<p>This site was created by Isaac Perez.<a href="#"> Back to top.</a>
</p>
<p>Copyright 2014 © The James Baldwin School.
<br>Some Rights Reserved</p>
</footer>
</div>
<!-- /.container -->
<!--- Javascript Bootsrap --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
</body>
自从我上次回答以来，我制作了一个包含 Scrollspy 的网页，但由于我的旧回答不是很有用，所以我替换了它。在 Scrollspy 的 Bootstrap documentation 中，列出的选项之一是数据偏移量，您只需将其添加到您正在监视的元素（在您的情况下为正文）即可轻松使用。在上面的代码中这个属性已经存在，你只需要更改值：
<body data-spy="scroll" data-target=".navbar" data-offset="70" id="home">
<!-- I have found 70px to work well, but you can fiddle around with it to get what you're after -->