html - 使用 Bootstrap 粘性导航栏进行 Href 跳转

Question

所以我有一个带有下拉菜单的粘性导航栏，可以让我跳转到页面的不同部分。但是，当我跳转到不同的部分时，导航栏会覆盖我跳转到的 div 的开头。我检查了导航栏，它的高度为 58，带有填充和所有内容。如何将跳转偏移 58 像素，以便 div 与粘性顶部齐平，并且不会遮挡启动 div 的标题？

例如下面，这是我的网站

当我点击“教育”时，它会切断“教育”标题，并且与我的 navbar 不齐平。 .

Answer 1

您可以使用 :before 伪类在该部分的开头创建一个隐藏空间。

堆栈片段

body {
  margin: 0;
}

ul.menu {
  background: #000;
  margin: 0;
  position: sticky;
  top: 0;
}

section[id]:before {
  display: block;
  height: 38px;   /* equal to the header height */
  margin-top: -38px;  /* negative margin equal to the header height */
  visibility: hidden;
  content: "";
}

ul.menu li {
  list-style: none;
  display: inline-block;
}

ul.menu li a {
  color: #fff;
  padding: 10px;
  display: block;
  margin-right: 20px;
}

section {
  height: 500px;
}

<ul class="menu">
  <li><a href="#link1">Link1</a></li>
  <li><a href="#link2">Link2</a></li>
</ul>
<section id="link1">Link1</section>
<section id="link2">Link2</section>