我单击主页链接时出现问题，它应该滚动到p1 id，但是当它滚动到p1 id的部分时，标题隐藏在标题下。如何解决。这是我尝试过的jsfiddle。
以下是相同的工作片段
* {
margin: 0;
padding: 0;
}
.red {
height: 100vh;
background-color: red;
}
.navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
background-color: white;
}
.yellow {
height: 100vh;
background-color: yellow;
}<div class="navigation">
<ul>
<a href="#p1">
<li>
HOME
</li>
</a>
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
<div class="red">
</div>
<div id="p1">
<h1>
Udayavaniiii
</h1>
<p>https://tutorial.djangogirls.org/ - learn the basics while making a blog http://codingforentrepreneurs.com/ - learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW - coding for entrepreneurs videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/
- learn the basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf - learn the basics while building a journaling app shareeditflaghttps://tutorial.djangogirls.org/ - learn the basics while making
a blog http://codingforentrepreneurs.com/ - learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW - coding for entrepreneurs videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/ - learn the
basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf - learn the basics while building a journaling app shareeditflaghttps://tutorial.djangogirls.org/ - learn the basics while making a blog http://codingforentrepreneurs.com/
- learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW - coding for entrepreneurs videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/ - learn the basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf
- learn the basics while building a journaling app shareeditflaghttps://tutorial.djangogirls.org/ - learn the basics while making a blog http://codingforentrepreneurs.com/ - learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW
- coding for entrepreneurs videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/ - learn the basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf - learn the basics while building a journaling
app shareeditflaghttps://tutorial.djangogirls.org/ - learn the basics while making a blog http://codingforentrepreneurs.com/ - learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW - coding for entrepreneurs
videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/ - learn the basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf - learn the basics while building a journaling app shareeditflag
</p>
</div>
<div class="yellow">
</div>
<div class="red">
</div>
<div class="red">
</div>最佳答案
将padding-top:54px应用于<div id="p1">，因为您的header height是54px。希望这可以解决您的问题
* {
margin: 0;
padding: 0;
}
.red {
height: 100vh;
background-color: red;
}
.navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
background-color: white;
}
.yellow {
height: 100vh;
background-color: yellow;
}
#p1 {
padding-top: 54px
}<div class="navigation">
<ul>
<a href="#p1">
<li>
HOME
</li>
</a>
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
<div class="red">
</div>
<div id="p1">
<h1>
Udayavaniiii
</h1>
<p>https://tutorial.djangogirls.org/ - learn the basics while making a blog http://codingforentrepreneurs.com/ - learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW - coding for entrepreneurs videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/
- learn the basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf - learn the basics while building a journaling app shareeditflaghttps://tutorial.djangogirls.org/ - learn the basics while making
a blog http://codingforentrepreneurs.com/ - learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW - coding for entrepreneurs videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/ - learn the
basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf - learn the basics while building a journaling app shareeditflaghttps://tutorial.djangogirls.org/ - learn the basics while making a blog http://codingforentrepreneurs.com/
- learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW - coding for entrepreneurs videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/ - learn the basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf
- learn the basics while building a journaling app shareeditflaghttps://tutorial.djangogirls.org/ - learn the basics while making a blog http://codingforentrepreneurs.com/ - learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW
- coding for entrepreneurs videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/ - learn the basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf - learn the basics while building a journaling
app shareeditflaghttps://tutorial.djangogirls.org/ - learn the basics while making a blog http://codingforentrepreneurs.com/ - learn the basics https://www.youtube.com/watch?v=uu98pqiUJU8&list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW - coding for entrepreneurs
videos https://docs.djangoproject.com/en/2.2/intro/tutorial01/ - learn the basics while making a polling app https://www.youtube.com/playlist?list=PLXmMXHVSvS-DQfOsQdXkzEZyD0Vei7PKf - learn the basics while building a journaling app shareeditflag
</p>
</div>
<div class="yellow">
</div>
<div class="red">
</div>
<div class="red">
</div>关于html - 由于页眉发粘而使滚动条隐藏在滚动条上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56851077/