如何让导航呈现fixed-top视觉效果但滚动时不跟随（无需fixed-top类）

我给nav元素添加了fixed-top类，让它显示在header上方（如图所示），但页面向下滚动时导航会固定在视口顶部跟随滚动。我希望不使用fixed-top类的前提下，保留当前的视觉样式，同时滚动时导航随页面一起移动（不固定在视口）。我曾尝试把nav放入header中，但没解决问题。

效果截图 #

• 导航在header上方的效果：
• 滚动时导航固定在顶部的效果：

当前代码 #

CSS代码 #

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #fff;
}

nav.navbar {
  transition: top 0.3s;
}

nav.navbar.navbar-light .navbar-nav {
  padding: 1.5rem 0;
}

nav.navbar.navbar-light .navbar-nav .nav-item {
  text-transform: uppercase;
  font-weight: 700;
}

nav.navbar.navbar-light .navbar-nav .nav-item .nav-link {
  padding-left: 1.5rem;
  color: #fff;
}

nav.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: #FE5000;
}

nav.navbar.navbar-light .navbar-nav .nav-item.active .nav-link {
  color: #FE5000;
}

header.masthead {
  padding-top: 10.5rem;
  padding-bottom: 6rem;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://www.patrikderka.cz/stavby-seibert/assets/img/home-bg.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

header.masthead .btn {
  background-color: #FE5000 !important;
  border: #FE5000 !important;
  padding: 1.25rem 2.5rem;
}

header.masthead .btn a {
  color: #fff;
  text-decoration: none;
}

header.masthead .masthead-subheading {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5rem;
  margin-bottom: 25px;
}

header.masthead .masthead-heading {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 3.25rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  header.masthead {
    padding-top: 17rem;
    padding-bottom: 12.5rem;
  }
  header.masthead .masthead-subheading {
    font-size: 2.25rem;
    font-style: italic;
    line-height: 2.25rem;
    margin-bottom: 2rem;
  }
  header.masthead .masthead-heading {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 4.5rem;
    margin-bottom: 4rem;
  }
}

HTML代码 #

<script src="https://kit.fontawesome.com/e5f67cf6ac.js" crossorigin="anonymous"></script>
<script src="reveal.js"></script>

<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" />

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="/">Domu</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/reference/">O nás</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/cenik">Služby</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/cenik">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/kontakt">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<header class="masthead">
  <div class="container">
    <div class="masthead-subheading">My jsme stavaři.</div>
    <div class="masthead-heading">PTS-STAVBY Seibert</div>
    <a class="btn btn-primary btn-lg text-uppercase" href="#services">Zjistit více</a>
  </div>
</header>


<section id="onas" class="py-5">
  <div class="container">
    <div class="title">
      <h2>
        O nás
      </h2>
      <p>
        Kdo jsme a co děláme?
      </p>
    </div>
  </div>
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-md-6 my-auto">
        <p>
          Stavební firma PTS-STAVBY SEIBERT byla založena v dubnu roku 2006. Zpočátku se firma zaměřuje na rekonstrukce objektů.
        </p>
        <p>
          Postupem času začíná převládat klasická stavební činnost od základní desky včetně projektů.
        </p>
        <p>
          V letech 2010-2020 firma realizuje řadu výstaveb v obcí našeho regionu a to převážně rekonstrukce stávajících objektů.
        </p>
        <p>
          V roce 2020 firma rozšiřuje svoji činnost o speciální stavební práce (brušení podlach jansen,příprava podkladu pro velkoobchody s krytinamy všeho druhu.atd).
        </p>
      </div>
      <div class="col-12 col-md-6">
        <img title="Stavitelství" alt="Stavitelství" class="img-fluid" src="https://www.patrikderka.cz/stavby-seibert/assets/img/mixfotek.jpg" />
      </div>
    </div>
</section>

要实现导航在header上方的视觉样式，同时不使用fixed-top类、滚动时导航随页面一起移动（不固定在视口），可以通过CSS绝对定位来实现：

1. 修改HTML中的nav类 #

移除nav元素的fixed-top类：

<nav class="navbar navbar-expand-lg navbar-light">

2. 添加/修改CSS样式 #

给header设置相对定位，让nav可以相对于它定位；同时给nav设置绝对定位，固定在header顶部：

/* 让header成为相对定位容器，作为nav的定位参照 */
header.masthead {
  position: relative;
}

/* 让nav绝对定位在header顶部，铺满宽度，保持视觉层级在header内容上方 */
nav.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

效果说明 #

• 调整后，nav会叠加在header顶部，视觉效果和使用fixed-top时完全一致；
• 滚动页面时，nav会随着header一起向上滚动，不会固定在视口顶部；
• 原header的padding-top已经预留了足够空间，无需额外调整，确保header内容不会被nav遮挡。

如果之前尝试将nav放入header未成功，是因为缺少给header设置position: relative的步骤，现在添加后，nav的绝对定位就能正确生效。

内容的提问来源于stack exchange，提问作者Patrik Derka