CSS Bootstrap 4, 固定顶部导航栏和其他粘性定位元素

在本文中，我们将介绍如何使用CSS Bootstrap 4创建固定顶部导航栏以及其他粘性定位元素。固定顶部导航栏可以使导航栏保持在网页顶部，无论用户滚动页面到哪里，导航栏都会始终可见。粘性定位元素是指元素在特定滚动位置后会变为固定定位，以保持在页面上不变的位置。

阅读更多：CSS 教程

固定顶部导航栏

在Bootstrap 4中，我们可以通过添加CSS类 .fixed-top 来创建固定顶部导航栏。下面是一个简单的示例代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

在上面的代码中，我们在导航栏的外部 div 元素中添加了 fixed-top 类。这样就可以使导航栏保持在页面上方，并且随着用户的滚动而保持可见。同时，我们也使用了Bootstrap的导航栏组件，包括导航栏品牌、响应式折叠按钮和导航链接。

其他粘性定位元素

除了固定顶部导航栏外，我们还可以使用Bootstrap 4在页面上创建其他粘性定位元素。通过添加 .sticky-top 类，我们可以使元素在滚动到指定位置后变为固定定位。下面是一个示例代码：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="card sticky-top">
        <div class="card-body">
          <h5 class="card-title">Sticky Card</h5>
          <p class="card-text">This card will become sticky once it reaches the top of the parent container.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Normal Card</h5>
          <p class="card-text">This card will not become sticky and will scroll with the page.</p>
        </div>
      </div>
    </div>
  </div>
</div>

在上面的代码中，我们在希望变为粘性定位的元素外部的容器 div 元素中添加了 sticky-top 类。在这个示例中，左侧的卡片将在滚动到其父容器的顶部时变为固定定位，而右侧的卡片将继续跟随页面滚动。

除了卡片元素外，我们还可以使用 .sticky-top 类来创建其他粘性定位元素，如导航栏、侧边栏等。