【发布时间】：2021-06-19 00:31:09
【问题描述】：
我希望它在我按下与 sectionX 对应的导航栏项或滚动到该部分时，导航栏上的某种突出显示我在该部分上。
我尝试添加一些 css 属性并使用 Bootstrap，但似乎无法正常工作。
非常感谢。
这是我的代码：
$(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
});
});html {
scroll-behavior: smooth;
}
body {
position: relative;
}
.vertical-nav {
min-width: 19rem;
width: 19rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.page-content {
width: calc(100% - 19rem);
margin-left: 19rem;
transition: all 0.4s;
}
#sidebar.active {
margin-left: -19em;
}
#content.active {
width: 100%;
margin: 0;
}
@media (max-width: 768px) {
#sidebar {
margin-left: -19em;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
margin: 0;
}
#content.active {
margin-left: 19em;
width: calc(100% - 19em);
}
}
.bg-nav {
background-color: #15202b;
}
.bg-page {
background-color: dark-grey;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="assets/favicon.png">
<title>Portfolio</title>
</head>
<body data-spy="scroll" data-target=".vertical-nav" data-offset="50" class="custom-scrollbar-js">
<div class="vertical-nav bg-nav" id="sidebar">
<div class="py-4 px-3 bg-nav" style="margin-top: 50%;">
<div class="text-center">
<img src="assets/profile.png" width="150" height="150" class="rounded-circle">
</div>
</div>
<ul class="nav flex-column bg-nav">
<li class="nav-item">
<a href="#section1" class="nav-link text-light text-uppercase h5 text-center">About</a>
</li>
<li class="nav-item">
<a href="#section2" class="nav-link text-light text-uppercase h5 text-center">Education</a>
</li>
<li class="nav-item">
<a href="#section3" class="nav-link text-light text-uppercase h5 text-center">Skills</a>
</li>
</ul>
</div>
<div class="page-content p-4 bg-page bg-dark" id="content" style="height: 100%;">
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class="btn btn-dark bg-nav rounded-pill shadow-sm px-4 mb-4 position-fixed">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
<!-- Page content -->
<div id="section1" class="container-fluid" style="padding-top:70px; padding-bottom:70px">
<h1 class="text-light">1</h1>
<h3 class="text-white">Hello, World</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
</div>
<div id="section2" class="container-fluid" style="padding-top:70px;padding-bottom:70px">
<h1 class="text-light">2</h1>
<h3 class="text-white">Hello, World</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
</div>
<div id="section3" class="container-fluid" style="padding-top:70px;padding-bottom:70px">
<h1 class="text-light">3</h1>
<h3 class="text-white">Hello, World</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
</div>
<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>【问题讨论】：
标签： html css bootstrap-4 navbar