位置粘性不适用于 CSS 网格项目

Question

我找到了几篇文章：

https://melanie-richards.com/blog/css-grid-sticky/

https://ishadeed.com/article/position-sticky-css-grid/

解决了尝试在 CSS 网格项目上使用position:sticky 时的“问题”。我设置这支笔来展示这个问题。我想我遵循上面列出的文章告诉我的内容，但由于某种原因，当网站滚动时，我的导航标签不会停留在停止处。

header {
  display: grid;
  grid-auto-columns: 16pz auto 16px;
  grid-template-areas: ". header .";
}
header > div {
  grid-area: header;
  display: grid;
  grid-auto-columns: repeat(2, 1fr);
  grid-template-areas: "logo logo" "nav guide";
}
header > div #logo-container {
  grid-area: logo;
  text-align: center;
  margin-bottom: 50px;
}
header > div #nav-container {
  grid-area: nav;
  position: sticky;
  align-self: start;
  top: 1em;
}
header > div #nav-container nav ul {
  display: flex;
}
header > div #nav-container nav ul li {
  list-style: none;
  margin-right: 50px;
}
header > div #nav-container nav ul li a {
  background-color: black;
  padding: 15px;
  color: white;
}
header > div #guide-container {
  grid-area: guide;
}

#hero {
  background-color: red;
  height: 100vh;
}

<header>
    <div>
    <section id="logo-container">
      <a href="#hero">Logo</a>
    </section>
    <section id="nav-container">
      <nav id="main-nav">
        <ul>
          <li><a href="#history">History</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#skynet">Skynet</a></li>
        </ul>
      </nav>
    </section>
    <section id="guide-container">
      <button class="show-md" id="guide-text-btn">Survival Guide</button>
    </section>
  </div>
</header>

<section id="hero"></section>

https://codepen.io/icekomo/pen/zYMgrpQ?editors=1100

Answer 1

您正在为您的#nav-container分配位置：粘性，但其父容器只有标题的高度并且不可滚动。

如果你想使用position:sticky，它需要位于一个元素内部，该元素的父元素具有可滚动内容。

在你的情况下，这条规则仅适用于身体。因此，如果您在直接子级（在本例中）上指定您的位置：粘性，它将起作用。

header {
  display: grid;
  grid-auto-columns: 16px auto 16px;
  grid-template-areas: ". header .";
  position: sticky;
  top: 1em;
}