如何正确放置Navbar组件并在向下滚动时粘贴它

Question

我使用react和boostrap 5来构建一个网站，我仍然是学习css和bootstrap5的新手。我需要一点帮助，因为我无法将导航栏放在背景图像上并在向下滚动时使其粘在顶部。在我的代码中，我已将导航栏和图像放在应用程序的标题中，不知道这是否正确，或者我是否需要将该代码放入正文中！感谢您的宝贵时间。

function App() {
  return (
    <div className="App">
      <header>
        <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
        <div class="container">
            <div>
              <img class="bg-img" src="./Crazycrabscover2.png" alt="BG image"></img>
            </div>
          </div>

          
            </div>
            <div class="container">
              <a class="navbar-brand" href="#">
                  <img src="./logo.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top"/>
                  CrazyCrabs
              </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav ms-auto">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">NFTdrop</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Connect</a>
                  </li>
                </ul>
              </div>
           </div>
        </nav>
     </header>

CSS：

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg-img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  filter: brightness(0.9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}



.container {
  height: 50%;
  width: 300px;
}

Answer 1

在 Bootstrap 5 中，有一个名为

sticky-top

的类，它允许人们做到这一点。

<nav class="navbar navbar-expand-lg navbar-light">
  <div class="container-fluid">
   <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

在以下链接中查看更多相关信息：w3schools

Answer 2

body元素包含将向用户显示的HTML文档的实际内容。请查看this，将导航栏粘贴到顶部。