导航栏在跳转到页面内容时隐藏文本

Question

我目前正在做一个项目来学习，对此我很陌生。我遇到了这个问题：

当我用来跳转到页面标题时，该标题的标题被导航栏遮挡。在此示例中，当我单击“德克萨斯州”时，标题被隐藏。如何在不大幅改变导航栏构建方式的情况下解决此问题？

.topnav {
background-color: #000000;
position: sticky;
top: 0;
min-height: 62px;
z-index: 999999;
padding-bottom: 40px;
}

.topnav a {
list-style-type: none;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;

}

.topnav .icon {
display: none;
}

  <div class="topnav" id="myTopnav">     
      <a href="#">THIS IS A NAVBAR</a>
  </div>

<h1>LOCATIONS</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venim, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cos
      equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prod
      ent, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      <div class="container">
        <h3>Contents</h3>
          <ol type="1">
            <li><a href="#h2_texas">Texas</a></li>
            <li><a href="#h2_florida">Florida</a></li>
            <li><a href="#h2_california">California</a></li>
           </ol>
      </div>
      
      <h2 id="h2_texas">Texas</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
      empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cos
      equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prod
      ent, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      
      <h2 id="h2_florida">Florida</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
      empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cos
      equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prod
      ent, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      
      <h2 id="h2_california">California</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
      empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo con
      equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prod
      ent, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>

Answer 1

我发现这个问题非常有趣，我拿了一个本地副本并检查，我已将以下代码片段添加到CSS中，它工作得很好。

h2 {
    scroll-margin-top: 102px; // header min height 62px + padding bottom 40px
}