Href Jump with Bootstrap Sticky Navbar [duplicate]

问题:

This question already has an answer here:

• How do I add a data-offset to a Bootstrap 4 fixed-top responsive navbar? 2 answers
• Fixed position navbar obscures anchors [duplicate]
• Bootstrap Navbar (along with topbar) anchor tag navigates content behind the navbar 1 answer

So I have a sticky navbar with a dropdown that allows me to jump to different sections of my page. However, when I jump to a different section, the navbar covers the start of the div I jump to. I checked the navbar, and it has a height of 58 with padding and everything. How do I offset the jump by 58 pixels so that the div is flush with the sticky top and not blocking the header that starts the div?

For example below, here's my website with

And when I click "Education", it cuts off the header saying education and isn't flush with my navbar.

回答1:

You can use the :before pseudo class to create a hidden space at the start of the section.

Stack Snippet

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>