出于某种原因，我无法使 Spyscroll 正常工作。谁能指出问题出在哪里？我一整天都在尝试修复它...
我已经尝试了 javascript 和 html+css 实现，但到目前为止它们都不起作用。当我手动将类“active”放在 a 上时，css 有效，但滚动导航时未突出显示。
HTML:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!--==========MENU============-->
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav">
<li><a href="#1">ABOUT</a></li>
<li><a href="#2">PROCESS</a></li>
<li><a href="#3">SERVICES</a></li>
<li><a href="#4">TEAM</a></li>
</ul>
</nav>
<!--==========CONTENT============-->
<section class="page" id="1">
</section>
<section style="background-color:red" class="page" id="2">
</section>
<section class="page" id="3">
</section>
<section style="background-color:red" class="page" id="4">
</section>
</body>
CSS:
.nav {
margin: 0 auto;
list-style: none;
text-align: center;
}
.nav li {
display: inline-block;
margin: 0 10px;
}
.nav li a {
color: #000;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
}
.nav li a:hover {
color: #00dcbe;
}
.nav li a.active {color:blue;}
.page {height:600px;border:1px solid #000}
最佳答案
如果您想让 Spyscroll 工作，那么您需要将 .navbar-nav 类添加到您的 ul 中，例如:
.nav {
margin: 0 auto;
list-style: none;
text-align: center;
}
.nav li {
display: inline-block;
margin: 0 10px;
}
.nav li a {
color: #000;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
}
.nav li a:hover {
color: #00dcbe;
}
.nav li a.active {color:blue;}
.page {height:600px;border:1px solid #000}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!--==========MENU============-->
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#1">Section 1</a></li>
<li><a href="#2">Section 2</a></li>
<li><a href="#3">Section 3</a></li>
</ul>
</nav>
<!--==========CONTENT============-->
<section class="page" id="1">
</section>
<section style="background-color:red" class="page" id="2">
</section>
<section class="page" id="3">
</section>
<section style="background-color:red" class="page" id="4">
</section>
</body>关于jquery - spy 卷轴不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42989205/