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

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 >
<div >
<h2 >Site Header</h2>
</div>
</header>
<div >
<h2 >Site Banner</h2>
</div>
<div >
   <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 >

<div >
<div >
<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  id="home">
<h2 >Home</h2>
<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  id="about">
<h2 >About</h2>
<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  id="contact">
<h2 >Contact</h2>
<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);

CodePudding user response：

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