当我使用平滑滚动时，引导粘滞顶部导航栏是重叠的内容

提问者：小点点

当我使用平滑滚动时，引导粘滞顶部导航栏是重叠的内容

我已经尝试修复这个错误几天了，没有谷歌或旧的答案似乎可以修复这个问题。

我已经添加了一个粘顶导航栏，坐在我的身体内（下面的巨型英雄图像，也在身体内）。我添加了平滑的滚动和一切工作良好。但是，当我点击一个链接并且它向下滚动时，它会与我的容器的开头与内容重叠。

我已经尝试添加填充-顶部和边距到我的身体，因为我看到的建议，但它把填充放在大屏幕之上（。hero）。然后我试着把我的大屏幕和nav从身体里拿出来，把它们放在头上，这确实解决了重叠的问题，但是nav不再粘在页面的顶部（这可能就是它解决问题的原因！）

css中似乎没有任何溢出会导致这种情况。

这是我第一次尝试写代码，所以我已经没有主意了。有人对为什么会出现这种情况有什么建议或理由吗？

我已经在一个jsfiddle(https://jsfiddle.net/ahronpeskin/gbmsket1)中设置了它，它似乎在我的大屏幕和导航栏之间添加了一个空白--平滑的滚动并不起作用，但是点击链接也有同样的问题。

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

共1个答案

匿名用户

使用普通的小型化jQuery代替JQuery-Slim。

然后用它进行平滑的滚动。

此处:

  <!-- 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的点击，防止默认行为，计算从顶部的偏移量并减去nav本身的高度

如果你还有什么问题，请问