粘性定位不会工作，没有溢出或高度调整“重复”

Question

我是HTML/CSS的新手，正在构建一个简单的测试站点。目前，我正在努力使粘性定位工作。具体地说，我有一个标题/徽标区域，下面有一个工具栏。当你向下滚动时，我希望标题滚动离开，但工具栏滚动直到它到达页面的顶部，它将保留在那里。

我已经尝试删除所有的大小调整，填充，和边距。我读到高度调整会引起问题，所以我想我会尝试所有这些。我也没有溢出。我还试着在所有不同的元素上设置粘滞位置。它仍然不起作用，我不明白为什么。

如有任何建议，将不胜感激。谢谢！

我的代码：

null

h1 {
  background-color: lightblue;
  text-align: center;
}

.toolbar {
  border: 3px double black;
  background-color: coral;
  padding: 5px;
  text-align: center;
  width: 80%;
  max-width: 650px;
  margin: auto;
  position: sticky;
  top: 0px;
  margin: auto;
}

main {
  height: 200vh;
}

a {
  display: inline-block;
  color: black;
  background-color: lightblue;
  list-style-type: none;
  border: 1px solid black;
  width: 100px;
  font-size: 20px position:sticky;
}

a:link {
  text-decoration: none;
  color: red;
}

<header>
  <h1>Title Area</h1>
  <h2>"Awesome Tagline!"</h2>
  <hr>
</header>

<nav>
  <ul class="toolbar">
    <a href="">
      <li>Home</li>
    </a>
    <a href="">
      <li>About</li>
    </a>
    <a href="">
      <li>Menu</li>
    </a>
    <a href="">
      <li>Other</li>
    </a>
  </ul>
</nav>

<main></main>

null

Answer 1

这不起作用，因为.toolbar是

标记的子元素。一个粘性元素，它必须留在其父元素中。如果父元素离开屏幕，子元素( .toolbar)也离开屏幕。将sticky属性移动到

标记：

删除此行：

.toolbar { position: sticky; top: 0; }

添加此行：

nav { position: sticky; top: 0; }

null

css prettyprint-override">h1 {
  background-color: lightblue;
  text-align: center;
}

.toolbar {
  border: 3px double black;
  background-color: coral;
  padding: 5px;
  text-align: center;
  width: 80%;
  max-width: 650px;
  margin: auto;
  margin: auto;
}

nav {
  position: sticky;
  top: 0px;
}

main {
  height: 200vh;
}

a {
  display: inline-block;
  color: black;
  background-color: lightblue;
  list-style-type: none;
  border: 1px solid black;
  width: 100px;
  font-size: 20px position:sticky;
}

a:link {
  text-decoration: none;
  color: red;
}

<header>
  <h1>Title Area</h1>
  <h2>"Awesome Tagline!"</h2>
  <hr>
</header>

<nav>
  <ul class="toolbar">
    <a href="">
      <li>Home</li>
    </a>
    <a href="">
      <li>About</li>
    </a>
    <a href="">
      <li>Menu</li>
    </a>
    <a href="">
      <li>Other</li>
    </a>
  </ul>
</nav>

<main></main>

Answer 2

position：sticky；将滚动显示父母的高度，因此只要导航显示在屏幕上，它就会一直滚动。因此，在您的情况下，需要将位置：sticky；放在 ... 上。

不确定这是否是正确的html，但您缺少元素。