How can i implement a proper anchor tag with a sticky header

Question

I created an HTML page with sticky header. Sticky header functionality is done by Vanilla JS. Everything working fine. But I have an issue. Before the header is stick on top, when I click on any of the Menu, the heading of relevant section is hiding behind the Sticky header. But it is working fine after the header is stick on top. How can I resolve this issue. I would like to use Pure Vanilla JS than jQuery. Code is as follows. Thanks in Advance!

HTML:

<header class="site-header">
<div class="container">
<h2 class="h2">Site Header</h2>
</div>
</header>
<div class="site-banner">
<h2 class="h2">Site Banner</h2>
</div>
<div class="course-menu">
   <ul>
     <li><a href="#home">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
   </ul>
</div>
<div class="site-content__section">

<div class="main-content">
<div class="main-content__section">
<p>The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy.</p>
</div>
<div class="main-content__section" id="home">
<h2 class="h2">Home</h2>
<p class="p">Home The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy.The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world.</p>
</div>

<div class="main-content__section" id="about">
<h2 class="h2">About</h2>
<p class="p">About The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy.The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy.The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. </p>
</div>


<div class="main-content__section" id="contact">
<h2 class="h2">Contact</h2>
<p class="p">Contact The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy.The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy.The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. You will learn how to effectively lead a team in today's changing environment, the technical aspects of successfully managing projects and the connection between projects and organizational strategy. The Project Management Professional (PMP)® certification opens your door to higher earning potential across the world. In our PMP Training Course, you will discover the predictive, agile and hybrid approaches of project management to gain a competitive edge. </p>
</div>
</div>
</div>
</div>

CSS:

html {overflow-x:hidden;}
body{font-family:arial;margin:0;padding:0;}

.site-header {
height:60px;
line-height:60px;
padding:0 30px;
}
.sticky-header {
position:fixed;
top:0;
width: 100%;
}
.course-menu {
background:#eee;
padding-left:20px;
padding-right:20px;
}
.course-menu ul {
display:flex;
list-style:none;
margin:0;
padding:0;
}
.course-menu ul li a {
height:50px;
line-height:50px;
padding-left:20px;
padding-right:20px;
text-decoration:none;
}
.main-content__section {
padding-top:70px;
padding-left:30px;
padding-right:30px;
}
.main-content__section h2 {
margin-top:0;
margin-bottom:0;
}
.site-banner {
background:#f7f7f7;
height:300px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #cdcdcd;
}
.site-banner h2 {
font-size:16px;
text-align:center;
}

JS:

let courseMenu=document.querySelector(".course-menu");
let courseMenuOffsetTop=courseMenu.offsetTop;
let fixedNav=()=>{
if(window.scrollY >= courseMenuOffsetTop ) {
courseMenu.classList.add("sticky-header");
}
else {
courseMenu.classList.remove("sticky-header");
}}
window.addEventListener("scroll",fixedNav);

Answer 1

https://jsbin.com/foweweziqi/edit?html,css,js,output

.sticky-header {
position:sticky;
top:0;
width: 100%;
}

Just replace position: fixed with position: sticky on class .sticky-header