Bootstrap sticky-top nav-bar 使用平滑滚动时内容重叠

Question

我已经尝试修复此错误几天了，但谷歌搜索或旧答案似乎无法解决该问题。

我添加了一个 sticky-top 导航栏，它位于我的 body 中（在超大屏幕英雄图像下方，也在 body 中）。我添加了平滑滚动，一切正常。但是，当我单击 link 并向下滚动时，它会与容器的开头部分重叠。

我已经尝试按照我所看到的建议将 padding-top 和边距添加到我的 body，但它会将填充放在超大屏幕 (.hero) 上方。然后我尝试将我的 jumbotron 和导航从 body 中取出并将它们放在 header 中，这确实解决了重叠问题，但导航不再停留在页面顶部（这可能是为什么它解决了这个问题！）

css 中似乎没有任何溢出会导致此问题。

这是我第一次尝试编写代码，所以我运行没有想法。有没有人对发生这种情况有任何建议或原因？

我已经在 jsfiddle (https://jsfiddle.net/ahronpeskin/gbmsket1) 中进行了设置，它似乎在我的超大屏幕和导航栏之间添加了一个白色 space - 平滑滚动不起作用，但单击links 有同样的问题。

HTML

<body data-spy="scroll" data-target="#navbarText">
   <!--hero image-->
  <div class="jumbotron jumbotron-fluid hero">
    <div class="container">
      <h1>Jill Peskin Counselling</h1>
      <p>
        Here for you when you need it most
      </p>
    </div>
    </div>

  <!--navbar-->
  <nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Jill Peskin Counselling</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

      <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#jill">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#training">Training and Experience</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact Me</a>
        </li>
      </ul>
      <span class="navbar-text">
        Here for you when you need it most
      </span>
    </div>
  </nav>


CSS

body{
    position: relative;
}

/*hero image*/
.hero{
  background: url(Images/zen.jpg) fixed center no-repeat;
background-size: cover;
padding: 400px;
text-transform: none;
color:white;
margin-bottom: 0;
}

/*navbar*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

Answer 1

而不是 JQuery-Slim 使用正常缩小 JQuery。

并用它进行平滑滚动。

此处：

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous">
    </script> 

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!--smooth scroll-->
    <script src="js/smooth-scroll.polyfills.min.js"></script>
    <script>
      $(document).on('click', 'a.nav-link', function (event) {
          event.preventDefault();
          console.log("CLICKED ANCHOR!");

          $('html, body').animate({
              scrollTop: $($.attr(this, 'href')).offset().top - $(".navbar.sticky-top").height()
          }, 500);
      });
    </script>

这基本上是监听对 a.nav-link 的点击，防止默认行为，计算距顶部的偏移量并减去导航本身的高度

如有其他问题，请提问

Bootstrap sticky-top nav-bar 使用平滑滚动时内容重叠

Bootstrap sticky-top nav-bar is overlapping content when I use smooth scroll

html

css

sticky

smooth-scrolling

nav