为什么不定位：我头上的粘性工作？

Question

我使用position: sticky;作为我的标题，但它似乎不起作用。错误是当我向下滚动时导航栏不会保持原位，就像使用position: sticky设置一样。

* {
  margin: 0px;
}

nav {
  width: 100%;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32);
}

#navigation {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

li {
  display: inline-block;
  padding: 0px;
  font-family: Antonio;
  font-size: 3em;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-right: 2px;
}

li a {
  text-decoration: none;
  color: #33C4C4;
  transition: 0.5s;
}

li a:hover {
  color: black;
  transition: 0.5s;
}

#dropdown-other {
  display: none;
  z-index: 1;
  position: absolute;
  background-color: white;
  border: #33C4C4 1.5px solid;
  border-radius: 10px;
  margin-right: 5px;
}

#dropdown-other a {
  color: #33C4C4;
  text-decoration: none;
  display: block;
  font-size: 0.5em;
  text-align: center;
}

#dropdown-other a:hover {
  color: black;
}

#other:hover #dropdown-other {
  display: block;
}

@media (max-width: 790px) {
  .nav-section {
    display: none !important;
  }
  #expand {
    display: inline-block !important;
  }
  .overflowDropdown {
    display: block !important;
  }
}

<div>
  <nav style="position: sticky; position: -webkit-sticky; top: 0px; z-index: 10;">
    <a href="#">
      <img src="Images/logo.png" id="logo" title="LOGO" />
    </a>
    <ul align="right" id="navigation">
      <li><a class="nav-section" href="#" title="HOME PAGE">HOME</a></li>
      <li><a class="nav-section" href="#" title="SHOP PAGE">SHOP</a></li>
      <li><a class="nav-section" href="#" title="PEOPLE PAGE">PEOPLE</a></li>
      <li><a class="nav-section" href="#" title="ABOUT PAGE">ABOUT</a></li>
      <li id="other">
        <a href="#" title="OTHER PAGES">OTHER</a>
        <div id="dropdown-other">
          <div class="overflowDropdown">
            <a href="#">HOME</a>
            <a href="#">SHOP</a>
            <a href="#">PEOPLE</a>
            <a href="#">ABOUT</a>
          </div>
          <a href="#">CONTACT</a>
          <a href="#">FEED</a>
          <a href="#">BOARD</a>
          <a href="#">CHANGELOG</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

<p style="margin-top: 700px;">test</p>

Answer 1

这是因为围绕着它的div。你的选择：

• 如所示，使父div变粘。
• 删除div，导航将是粘性的（因为没有父容器）。
• 如果需要div，请将导航器从div中取出。

* {
  margin: 0px;
}

nav {
  width: 100%;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32);
  z-index: 10;
}

#navigation {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

li {
  display: inline-block;
  padding: 0px;
  font-family: Antonio;
  font-size: 3em;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-right: 2px;
}

li a {
  text-decoration: none;
  color: #33C4C4;
  transition: 0.5s;
}

li a:hover {
  color: black;
  transition: 0.5s;
}

#dropdown-other {
  display: none;
  z-index: 1;
  position: absolute;
  background-color: white;
  border: #33C4C4 1.5px solid;
  border-radius: 10px;
  margin-right: 5px;
}

#dropdown-other a {
  color: #33C4C4;
  text-decoration: none;
  display: block;
  font-size: 0.5em;
  text-align: center;
}

#dropdown-other a:hover {
  color: black;
}

#other:hover #dropdown-other {
  display: block;
}

@media (max-width: 790px) {
  .nav-section {
    display: none !important;
  }
  #expand {
    display: inline-block !important;
  }
  .overflowDropdown {
    display: block !important;
  }
}

<div style="position: -webkit-sticky;position: sticky;top: 0px;">
  <nav>
    <a href="#">
      <img src="Images/logo.png" id="logo" title="LOGO" />
    </a>
    <ul align="right" id="navigation">
      <li><a class="nav-section" href="#" title="HOME PAGE">HOME</a></li>
      <li><a class="nav-section" href="#" title="SHOP PAGE">SHOP</a></li>
      <li><a class="nav-section" href="#" title="PEOPLE PAGE">PEOPLE</a></li>
      <li><a class="nav-section" href="#" title="ABOUT PAGE">ABOUT</a></li>
      <li id="other">
        <a href="#" title="OTHER PAGES">OTHER</a>
        <div id="dropdown-other">
          <div class="overflowDropdown">
            <a href="#">HOME</a>
            <a href="#">SHOP</a>
            <a href="#">PEOPLE</a>
            <a href="#">ABOUT</a>
          </div>
          <a href="#">CONTACT</a>
          <a href="#">FEED</a>
          <a href="#">BOARD</a>
          <a href="#">CHANGELOG</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

<p style="margin-top: 700px;">test</p>