Question

我正在试验粘性导航，但遇到了问题。问题是，当我将导航栏放到其他元素中时，它不再具有粘性。

.nav-wrapper{
  position: absolute; 
  bottom: 0;
}

.nav-wrapper nav{
  position: sticky;
  top: 0;
}

    <div class="nav-wrapper">
     <nav>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
     </nav>
    </div>

Answer 1

位置不变，请考虑父元素的行为应有的表现。在您的情况下，父元素的高度由sticky元素定义，因此该元素没有粘性。

添加边框以更好地查看问题：

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
}

.nav-wrapper nav {
  position: sticky;
  top: 0;
}

body {
  min-height:200vh;
}

<div class="nav-wrapper">
  <nav>
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>About</li>
    </a>
  </nav>
</div>

现在将高度添加到父元素并查看发生了什么：

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
  height:80vh;
}

.nav-wrapper nav {
  position: sticky;
  top: 0;
}

body {
  min-height:200vh;
}

<div class="nav-wrapper">
  <nav>
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>About</li>
    </a>
  </nav>
</div>

粘性行为表现良好，因为父元素上有足够的高度，可以在特定阈值之后固定该元素。

粘性定位元素是其计算位置的元素价值是粘性的。它被视为相对位置直到其 包含的区块超过了指定的阈值（例如，将top设置为在其流根（或其容器）中的值（不是auto）在其中滚动），这时它被视为“卡住” 直到会议 其包含块的相反边缘。^ref

当元素包裹在另一个元素中时，为什么position：sticky不起作用？

1 个答案: