【发布时间】：2020-03-07 20:52:02
【问题描述】：
我有一个由 5 个不同部分组成的单页网站，顶部有一个固定导航。在这个导航中，我有 5 个链接到页面的相应部分。单击时，它会平滑地向下滚动到该部分。我遇到的问题是活动课程。在页面的顶部，“关于”链接有一个活动类，它在链接的底部添加了一个粗边框。但是当我向下滚动到下一部分“骑行区域”时，我希望活动类将自己从“关于”中删除并将自己添加到“骑行区域”。
这是我的 HTML：
<div class="desktop-navbar">
<img class="logo-desktop" src="img/logo-desktop.png">
<div id="desktop-nav">
<a href="#5">CONTACT</a>
<a href="#4">PRICING AND SERVICES</a>
<a href="#3">FACILITY</a>
<a href="#2">RIDING AREAS</a>
<a href="#1" class="active">ABOUT</a>
</div>
</div>
这是 CSS：
.desktop-navbar {
display: block;
width: 100%;
height: 75px;
background-color: white;
box-shadow: 0 5px 60px rgba(0,0,0,0.15);
position: fixed;
}
#desktop-nav a {
float: right;
display: block;
color: black;
text-align: center;
padding-right: 14px;
padding-left: 14px;
padding-bottom: 5px;
text-decoration: none;
font-size: 16px;
font-family: 'Chau Philomene One', sans-serif;
margin-top: 43px;
transition: 0.5s;
}
a.active {
border-bottom: thick solid #F15B29;
}
我知道这可以使用 jQuery 来完成，但是我还没有找到适合我的方法，而且我对 JS 不是很流利，所以我不确定如何去做。
【问题讨论】：
-
Bootstrap Scrollspy 易于设置和使用。
-
@stackoverflowusrone 你知道我如何在不向我的网站添加 Bootstrap css 的情况下使用 ScrollSpy 吗？当我将 Bootstrap 链接添加到我的网站时，我的几乎所有样式都更改为 Bootstrap 样式..
标签： javascript jquery html css scroll