Question

我正在尝试相对于视口设置一个div粘贴位置，因此当它滚动到视图外时它会粘在顶部但是它无效。

#navigation {
  display: flex;
  background-color: #AA1111;
  width: 100%;
  height: 50px;
  z-index: 10;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

header {
  height: auto;
  display: flex;
}

<body>
  <div class="page">
    <header>
      <div id="navigation">
      </div>
    </header>
  </div>
</body>

Answer 1

当父元素仍然可见时，粘滞将粘在顶部。话虽如此，您的父元素（标题）仅包含粘性元素，因此将导航视为导航正常。如果你在标题中有另一个元素有一些高度，导航将粘在顶部，直到它滚出视图。

https://jsfiddle.net/1zbnr2ho/

就像其他人所说的那样，粘性并没有很好的浏览器支持，也许您正在寻找的东西可以用位置完成：固定？

＆＃13;

#navigation {
  display: flex;
  background-color: #AA1111;
  width: 100%;
  height: 50px;
  z-index: 10;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}


body {
  min-height: 5000px;
}

.other {
  height: 500px;
  background: blue;
}

＆＃13;

<div class="page">
  <header>
    <div id="navigation"></div>
    <div class="other">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </header>
</div>

＆＃13;

粘滞的位置不适用于div元素

1 个答案: