html - 当导航栏在移动设备上折叠时，背景正文向上滚动

Question

当我单击导航项时，导航栏关闭并且背景主体也向上滚动到相同的大小，直到导航栏关闭并在导航栏关闭时停止滚动。这只发生在移动设备上。我试过overflow: hidden了，但它不工作。

知道如何解决这个问题吗？

这是我的代码

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Azam Badar</a>
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse" id="navbarColor03">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#techstack">Techstack</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#projects">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#socialwall">Socialwall</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#let'stalk">Let's Talk</a>
        </li>
    </ul>

  </div>
</nav>

请看下面的 2 张图片，当我单击导航图标并打开导航栏时，正文（在本例中为 myprojects）向下滚动，反之亦然。

非常感谢

标签： htmlcssbootstrap-4

Answer 1

很高兴看到 CSS 代码，但我猜你错过了position:absolute某个地方。您的导航必须定位为绝对并且z-index大于容器，否则您将无法看到它。希望这会有所帮助，如果没有，请分享 CSS 代码，以便我查看:)