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

Answer 1

您可以使用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

Answer 2

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

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

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

这将占用固定顶部Navbar所需的空间。您还需要删除margin-top的{{1}}偏移量，因为此方法将一致地用于所有部分，并允许scrollspy工作。

相关
How do I add a data-offset to a Bootstrap 4 fixed-top responsive navbar?
Href Jump with Bootstrap Sticky Navbar

Answer 3

This解决方案在顶部添加填充并以负边距消除间隙。这对我来说效果最好。

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  </head>
  <body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#section1">Section 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section2">Section 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section3">Section 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section4">Section 4</a>
          </li>
        </ul>
      </div>
    </nav>
 
  <div class="container">
    <div class="offset col-12"></div>
    <section id="section1" class="row">
      <p class="col-12">
        Section 1
      </p>
    </section>
    <section id="section2" class="row">
      <p class="col-12">
        Section 2
      </p>
    </section>
    <section id="section3" class="row">
      <p class="col-12">
        Section 3
      </p>
    </section>
    <section id="section4" class="row">
      <p class="col-12">
        Section 4
      </p>
    </section>
  </div>
 
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Answer 4

我喜欢这样动态地偏移高度标头（或导航栏）：

$('.nav-link').click(function(e){
    let divCoords = $(e.target.hash).offset();
    let height = $('header').height();
    e.preventDefault();
    window.scrollTo({
    left: divCoords.left, 
    top: divCoords.top - height,
    behavior: 'smooth'
    });
});

Answer 5

通常在使用像这样的粘性标题时，您需要找到导航栏的高度并相应地偏移整个视图。像

这样的东西

p5.js

您的另一个选择是使用JavaScript。

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

5 个答案: