由于标题粘滞，在滚动上隐藏分区

Question

我有一个问题，当我点击主页链接时，它应该滚动到p1 id，但当它滚动到p1 id的部门时，标题隐藏在标题下。如何解决it.Here是我的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>

​

Answer 1

将padding-top:54px应用于您的<div id="p1">，因为您的header height is 54px .Hope，这将解决您的问题

​

* {
  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>

​