tags: [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. <ul>
    2.   <li>head</li>
    3.   <li>content</li>
    4.   <li>sticky</li>
    5.   <li>content</li>
    6.   <li>content</li>
    7.   <li>content</li>
    8.   <li>content</li>
    9.   <li>content</li>
    10.   <li>content</li>
    11.   <li>content</li>
    12. </ul>
    1. ul {
    2.   margin: 0;
    3.   padding: 0;
    4.   list-style: none;
    5.   height: 100px;
    6.   overflow: auto;
    7. }
    9. li:nth-child(3) {
    10.   position: sticky;
    11.   top: 0;
    12.   background: #000;
    13.   color: #fff;
    14. }

    效果:
    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 且 为块元素的父元素。