“位置:粘性；”属性如何工作？

Question

当用户滚动页面时，我想让导航栏粘在视图的顶部，但是它不起作用，我也不知道为什么。如果您能提供帮助，下面是我的HTML和CSS代码：

​

.container {
  min-height: 300vh;
}
.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<main class="container">
  <nav style="position: sticky; position: -webkit-sticky;">
    <ul align="left">
      <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
      <li><a href="#/about" class="nav-selections">About</a></li>
      <li><a href="#/products" class="nav-selections">Products</a></li>
      <li><a href="#" class="nav-selections">Home</a></li>
    </ul>
  </nav>
</main>

​

Answer 1

粘性定位是相对定位和固定定位的混合体。元素被视为相对定位，直到它越过指定的阈值，此时它被视为固定定位。 ..。 您必须为粘性定位指定至少一个 top、right、bottom或left 的阈值才能按预期操作。否则，它将无法与相对定位区分开来。[资料来源: MDN。]

因此，在您的示例中，您必须通过使用top属性来定义它应该停留在最后的位置。

​

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

​

Answer 2

检查一个祖先元素是否有溢出集(例如overflow:hidden)；尝试切换它。您可能必须检查比您预期的更高的DOM树)。

这可能会影响子类元素上的position:sticky。

Answer 3

我也有同样的问题，我找到了答案，这里。

如果您的元素没有像预期的那样粘住，那么首先要检查的是应用于容器的规则。

特别是，查找元素的任何父级上设置的任何溢出属性。不能在元素的父元素上使用：overflow: hidden、overflow: scroll或overflow: auto。