css 我怎样才能实现一个合适的锚标记与一个粘头

fbcarpbf  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(141)

我创建了一个带有粘头的HTML页面。粘头功能是由Vanilla JS完成的。一切正常。但我有一个问题。在粘头之前,当我点击任何菜单时,相关部分的标题隐藏在粘性标题后面。2但是标题粘在上面之后就可以正常工作了。3我该如何解决这个问题呢?我想使用纯香草JS比jQuery。代码如下。提前感谢!
超文本:

<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);
pw9qyyiw

pw9qyyiw1#

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

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

只需更换位置:固定位置:粘在类上。粘头

相关问题