<div class=”anchor1″>
<nav>
<div class=”container”>
<ul>
<li class=”home active”><a href=”#home”>Home</a></li>
<li class=”about”><a href=”#about”>About</a></li>
<li class=”contact”><a href=”#contact”>Contact</a></li>
<li class=”footer”><a href=”#footer”>Footer</a></li>
</ul>
</div>
</nav>
</div>
<div class=”anchor2″>
<section id=”home”>
<h1>This is my home page</h1>
</section>
<section id=”about”>
<h1>You can read about me here</h1>
</section>
<section id=”contact”>
<h1>Wanna Contact me just <u>click here</u></h1>
</section>
<section id=”footer”>
<h1>This page created in 2021</h1>
</section>
</div>

<script type=”text/javascript”>
const sections = document.querySelectorAll(“.anchor2 section”);
const navLi = document.querySelectorAll(“.anchor1 nav .container ul li”);
window.onscroll = () => {
var current = “”;

sections.forEach((section) => {
const sectionTop = section.offsetTop;
if (pageYOffset >= sectionTop – 60) {
current = section.getAttribute(“id”); }
});

navLi.forEach((li) => {
li.classList.remove(“active”);
if (li.classList.contains(current)) {
li.classList.add(“active”);
}
});
};
</script>
<style type=”text/css”>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: “Ubuntu”;
font-size: 15px;
scroll-behavior: smooth;
background-color: #42523f;
}
.anchor2 section {
height: 700px;
width: 100%;
background-color: #7e8081;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
#home {
background-color: #1C8106;
}
#about {
background-color: #6081C3;
}
#footer {
background-color: #A83E11;
}
.anchor1 nav {
height: 100%;
position: fixed;
padding-top: 200px;
top: 0px;
}
.anchor1 nav .container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 10px;
}
.anchor1 nav .container ul li {
display: block;
}
.anchor1 nav .container ul li a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
color: black;
}
.anchor1 nav .container ul li.active {
border-left: 2px solid white;
transition: 0.3s;
}
.anchor1 nav .container ul li.active a {
color: #ffffff;
}
</style>