使用Bootstrap 4固定导航栏以HTML格式偏移滚动锚点

Question

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

使这个codepen显示我面临的问题:
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;
}

Answer 1

这个优雅的 CSS 1-liner 解决方案对我来说效果很好：

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

我的导航栏高度是 125px

Answer 2

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

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

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

这将为占顶置导航栏提供所需的空间。您还需要删除的margin-top偏移量，#section1因为此方法将对所有部分一致地起作用，并允许scrollspy工作。

相关的
如何将数据偏移量添加到Bootstrap 4固定顶部响应式导航栏？
Href使用Bootstrap Sticky Navbar跳转

Answer 3

此解决方案添加了一个填充并通过顶部的负边距消除了间隙。这对我来说效果最好。

section {
    padding-top: 56px;
    margin-top: -56px;
}

section {
    padding-top: 56px;
    margin-top: -56px;
}

.offset {
    height: 54px;
}

/* START SNIPPET */
section {
    padding-top: 56px;
    margin-top: -56px;
}
/* END SNIPPET */

#section1 p, #section3 p {
    background-color: #ddd;
}
#section2 p, #section4 p {
    background-color: #ccc;
}
p {
    min-height: 15rem;
}

Answer 4

您可以jQuery用来覆盖默认行为，因此您不必更改布局（边距，填充等）。

  var divId;

  $('.nav-link').click(function(){    
    divId = $(this).attr('href');
     $('html, body').animate({
      scrollTop: $(divId).offset().top - 54
    }, 100);
  });

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