position sticky | 三人成太

TIP

无意间发现position除了static relative absolute fixed还有个sticky粘性定位，这里记录下初步体验

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是真的滚动祖先。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

A
aa
aaa
aaaa
aaaaa

B
bb
bbb
bbbb
bbbbb

C
cc
ccc
cccc
ccccc

点击查看源码

vue

<style scoped>
.container {
  width: 100px;
  height: 200px;
  overflow: scroll;
}
.container ul {
  width: 300px;
  height: 500px;
  border: 1px solid blue;
}
.container li {
  width: 100px;
  height: 80px;
  border: 1px solid grey;
}
.container li:nth-child(1) {
  position: sticky;
  top: 10px;
  background: grey;
  border-color: red;
}
</style>
<template>
  <div class="container">
    <div>
      <ul>
        <li>A</li>
        <li>aa</li>
        <li>aaa</li>
        <li>aaaa</li>
        <li>aaaaa</li>
      </ul>
      <ul>
        <li>B</li>
        <li>bb</li>
        <li>bbb</li>
        <li>bbbb</li>
        <li>bbbbb</li>
      </ul>
      <ul>
        <li>C</li>
        <li>cc</li>
        <li>ccc</li>
        <li>cccc</li>
        <li>ccccc</li>
      </ul>
    </div>
  </div>
</template>

每个ul的第一li设置粘性定位，在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

可以看见，尽管是相对它最近的滚动祖先元素固定定位了，但是还是受它父亲的管制，它的活动范围还是在父亲的辖区。

兼容性有点差