我如何使用粘性 header 實現正確的錨標記

Question

我創建了一個帶有粘性 header 的 HTML 頁面。粘性 header 功能由 Vanilla JS 完成。 一切正常。 但我有一個問題。 在 header 粘在上面之前，當我單擊任何菜單時，相關部分的標題隱藏在粘性 header 后面。但在 header 粘在上面后它工作正常。 我該如何解決這個問題。 我想使用 Pure Vanilla JS 而不是 jQuery。代碼如下。 提前致謝！

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;
}

記者：

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%;
}

只需替換 position：固定為 position：粘在 class.sticky-header 上