I'm currently working on a website for my F1 in Schools team and I'm looking to implement a feature where the button in the navigation bar changes its background color and font color when that section of the page is active, even while scrolling or clicking. Would CSS and JS be the right tools for this task? Any assistance with the navbar would be greatly appreciated, as the rest of the website is responsive and meets my standards.
HTML
<html>
<button onclick="topFunction()" id="myBtn" title="Back to top">Back to Top</button>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="main">
<head>
<title>Night Wolves</title>
...
... (the HTML code continues)
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
...
... (the CSS code continues)