我在单击主页链接时遇到问题,它应该滚动到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>
答案 0 :(得分:0)
将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>