The navigation bar on my website is giving me a headache. It works perfectly when the page is at the top (home section), but as soon as it scrolls down to another section, it stops working. I've tried multiple solutions, but none seem to do the trick. I scoured the internet for similar issues, but couldn't find anything that matched my problem. Below is just the code for the "about" section to give you context. Any help would be greatly appreciated!
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
...
</head>
<body>
<button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
<div class="container">
<div id="main" class="scroll">
<nav>
<ul>
<li><a href="#home" class="js-anchor-link">Home</a></li>
<li><a href="#about" class="js-anchor-link">About</a></li>
<li><a href="#resume" class="js-anchor-link">Resume</a></li>
<li><a href="#portfolio" class="js-anchor-link">Portfolio</a></li>
<li><a href="#contact" class="js-anchor-link">Contact</a></li>
</ul>
</nav>
<h1 class="name">TITLE</a></h1>
</div>
<section id="about" class="scroll">
<div class="box">
<div class="content">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
</section>
</body>
</html>