这是我的 html 和 css。请帮助我使用 scrollspy，因为我不知道到底是什么问题。如果可能的话，请告诉我您为解决问题而编写的代码
我的 HTML:
<nav class="navbar navbar-default center navbar-fixed-top" id="navbar">
<button class="navbar-toggler hidden-sm-up"type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">☰</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#"></a>
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-target="#jumbotron">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#skills">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class=" jumbotron" id="jumbotron"></div>
<div id="about"></div>
<div id="skills"></div>
<div id="contact"></div>
我的 CSS
div 的高度为 750px
body
{
background: none;
position: relative;
margin: 0;
padding: 0;
font-family: 'Droid Serif', Georgia, Times, serif;
}
/* --------------------------------------------Navbar CSS--------------------------------------------------- */
.navbar-default
{
background-color: #610B0B ;
border-radius:0px;
}
.navbar-default .navbar-nav > li > a
{
color: white;
font-size: 15px;
font-family: 'Droid Serif', Georgia, Times, serif;
letter-spacing: 1px;
margin: 3px 10px -3px 10px;
border: 2px solid transparent;
padding: 8px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: white;
padding: 8px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: #555;
background-color: #E7E7E7;
}
最佳答案
有几处错误。
首先，您的 3 个 nav-link anchor 有data-target=当他们应该有href=
其次，您需要设置 data-target=到 <body>导航栏。这允许 Javascript 找到 Scrollspy 的目标:
<body data-target="#navbar">
第三，如果你还没有，你需要通过 Javascript 调用 Scrollspy:
$('body').scrollspy({ target: '#navbar' })
这是一个带有工作示例的 Codepen:
关于javascript - Bootstrap Scroll Spy 不工作。仅显示主状态事件但向下滚动时不会更改为其他状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37501095/