粘性定位

css

position: sticky 是一个比较新的 css 定位属性，目前浏览器兼容性不好。仅在比较新的 Chrome 和 Firefox 支持， IE 完全不支持。

image.png

下面的这句话很好的概括了该属性的用途和特点:

Keeps elements positioned as “fixed” or “relative” depending on how it appears in the viewport. As a result the element is “stuck” when necessary while scrolling.

“sticky” 可以认为是相对定位和固定定位的混合，当设置了 sticky 的元素跨越特定阈值前为相对定位，当超过特定阈值后为固定定位。

我们一起来看下面这个🌰

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
  <li>head</li>
  <li>content</li>
  <li>sticky</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100px;
  overflow: auto;
}

li:nth-child(3) {
  position: sticky;
  top: 0;
  background: #000;
  color: #fff;
}

效果:
Kapture 2020-02-17 at 14.40.52.gif

当向上滑动页面时，sticky 这个 li 还没有滑动到顶部（top: 0）之前，是和其ta li 表现一样的，此时可看做为 position: relative; 当滑动到底部之后，继续向上滑动，sticky 吸附于顶部不再随其ta li 继续向上滚动，此时表现为 position: fixed;

position 为 sticky 的元素有以下几个特点：
1）不脱离文档流。比如上面的小栗子，如果在 div 外再加些其他的标签及内容，当内容为 sticky 的 li 固定不动时，并不会覆盖到新添加的内容上，所以并没有脱离当前的文档流。
2）sticky 可认为是 relative 及 fixed 的组合。
3）必须设置 top、bottom、left 或者 right,否则 sticky 不生效。
4）sticky 元素 的 top、bottom、left 或者 right是相对于第一个 overflow 不是 visible 且 为块元素的父元素。