Question

我查看了有关不粘导航栏的其他一些问题，但我仍未解决。这可能与我放置标签的方式有关，但我不太确定。我可能只是将粘性代码放在错误的CSS选择器中。

这是我的代码：

#navbar {
  max-width: 100%;
  background-color: black;
  top: 0;
}

nav span:hover {
  border-bottom: 1px solid rgb(200, 140, 16);
}
nav a:hover {
  color: rgb(200, 140, 16);
}

ul {
  display: flex;
  height: 30px;
  padding: 0px;
}
nav {
  font-family: "Odibee Sans", cursive;
  font-size: 25px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(200, 140, 16);
  z-index: 1;
  text-decoration: none;
  display: flex;
  justify-content: center;
  position: sticky;
}

<body>
    <header>
      <div id="banner-container">
        <img id="topper" src="./newstop.png" />
      </div>
      <nav id="navbar">
        <div id="side-icon">
          <a href="#top"><img src="../copo.png"/></a>
        </div>
        <div class="link-container">
          <ul id="list-container">
            <li>
              <div class="links">
                <a href="../home/index.html"><span>Our Story</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Our Vehicles</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a href="#recent" class="active"><span>News</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Sign In</span></a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </header>

Answer 1

您在top: 0;之后忘记使用position: sticky;

position: sticky;
top: 0;

Answer 2

#navbar {
  max-width: 100%;
  background-color: black;
  top: 0;
}

nav span:hover {
  border-bottom: 1px solid rgb(200, 140, 16);
}
nav a:hover {
  color: rgb(200, 140, 16);
}

ul {
  display: flex;
  height: 30px;
  padding: 0px;
}
nav {
  font-family: "Odibee Sans", cursive;
  font-size: 25px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(200, 140, 16);
  z-index: 1;
  text-decoration: none;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
}
#topper{
  height: 200px;
  width: 100%;
}

<body>
    <header>
      <div id="banner-container">
        <img id="topper" src="https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg" />
      </div>
      <nav id="navbar">
        <div id="side-icon">
          <a href="#top"><img src="../copo.png"/></a>
        </div>
        <div class="link-container">
          <ul id="list-container">
            <li>
              <div class="links">
                <a href="../home/index.html"><span>Our Story</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Our Vehicles</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a href="#recent" class="active"><span>News</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Sign In</span></a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
      <div>
       <p>
        <img src="https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg" />
       </p>
      </div>
    </header>

使用位置：粘性时导航栏不滚动

2 个答案: