时间戳

首页 > 解决方案 > 为什么粘性位置不适用于我的导航？

html - 为什么粘性位置不适用于我的导航？

问题描述

我试图将位置粘性添加到我的导航类“header__div-nav”，但它似乎不起作用。我已尝试按照其他帖子的建议添加，显示父级的首字母，但没有结果。

现在这表现为静态而不是粘性。

body {
  font-family: "New Tegomin", serif;
  background-color: #ddd;
  margin-bottom: 5vh;
}

figcaption {
  display: none;
}

.header__div-nav {
  box-shadow: 0 4px 2px -2px gray;
  background-color: white;
  position: sticky;
  top: 0; /* required */
  width: 100%;
  z-index: 999;
}
.navbar__ul {
  margin: 0;
  padding: 0;
  height: 20vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.navbar__ul * {
  padding: 0 2vw;
  list-style-type: none;
  display: block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mac Miller</title>
  </head>
  <body>
    <header id="header">
      <div class="header__div-nav">
        <nav id="navbar">
          <ul class="navbar__ul">
            <li><a href="#tribute-info">About</a></li>
            <li><a href="#albums">Albums</a></li>
            <li><a href="#pics">Cool Pics</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="main">
      <div class="main__title_container">
        <h1 id="title">Mac Miller</h1>
      </div>
        <h2>About</h2>
        <p>
          Malcolm James McCormick (January 19, 1992 – September 7, 2018), known
          professionally as Mac Miller, was an American rapper, singer,
          songwriter, and record producer from Pittsburgh, Pennsylvania.
        </p>
    </main>
  </body>
</html>

标签： htmlcss

解决方案

当一个带有position: sticky样式的元素被包装，并且它是包装元素内的唯一元素时，这个被定义的元素 position: sticky将不会粘住。而不是.header__div-nav请添加position: sticky到您的标题

#header {
  position: sticky;
  top: 0;
}

推荐阅读