使用 Bootstrap 4 固定导航栏在 HTML 中偏移滚动锚点

Question

所以，我有这个由几个部分组成的单页。用户可以通过滚动自己或单击导航栏（带有锚点的 href）来转到这些部分。由于 Bootstrap 4 导航栏固定在顶部，因此内容被放置在其下方。有没有办法让锚点偏移-54px，这样每当我点击锚点链接时，它就会在导航栏（X:54px）下方显示内容，而不是在导航栏（X:0px）下方显示内容。

制作此代码笔以显示我面临的问题：

https://codepen.io/anon/pen/XEjaKv

每当您单击锚链接时，它都会将您带到该部分，但是，导航栏会覆盖文本。

所有部分均为 100 视高。

使用的 SCSS：

 .container{
  section{
    height: 100vh;
    &#section1{
      margin-top: 54px; // we need to offset the first section by 54px because of the navbar..
    }
    &#section1, &#section3{
      background-color: #ddd;
    }
    &#section2, &#section4{
      background-color:#ccc;
    }
  }
}
html{
  scroll-behavior:smooth;
}

原文由 Kevin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有几种不同的方法来解决它，但我认为最好的方法是在每个部分放置一个隐藏的伪元素 ::before 。这是一个 只有 CSS 的解决方案，没有 JS 或 jQuery ……

 section:before {
    height: 54px;
    content: "";
    display:block;
}

https://www.codeply.com/go/J7ryJWF5fr

这将放置固定顶部导航栏所需的空间。您还需要删除 --- 的 #section1 margin-top 偏移量，因为此方法将始终适用于 所有 部分并允许滚动间谍工作。

---

有关的

如何向 Bootstrap 4 固定顶部响应式导航栏添加数据偏移量？

使用 Bootstrap 粘性导航栏跳转 Href

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个优雅的 CSS 1-liner 解决方案非常适合我：

html {滚动填充顶部：125px； }

我的导航栏高度是 125px

原文由 Aleksa Mitrović 发布，翻译遵循 CC BY-SA 4.0 许可协议