Href Jump with Bootstrap Sticky Navbar

Question

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

例如下面，这是我的网站

当我点击“教育”时，会切断表示教育的标题，而不是我的navbar。

Answer 1

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

Stack Snippet

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;