Href使用Bootstrap Sticky Navbar跳转 [英] Href Jump with Bootstrap Sticky Navbar

问题描述

因此，我有一个带有下拉菜单的导航栏，它使我可以跳转到页面的不同部分.但是，当我跳到另一部分时，导航栏会覆盖我跳至的div的开始.我检查了导航栏，它的高度为58，带有填充和其他所有内容.如何将跳转偏移58个像素，以使div与粘性顶部齐平，而不阻塞启动div的标题?

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?

例如，下面是我的网站

当我单击教育"时，它会切断标题为教育"的标题，并且不会与我的navbar保持一致.

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

推荐答案

您可以使用:before伪类在本节的开头创建一个隐藏空间.

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>

这篇关于Href使用Bootstrap Sticky Navbar跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！