聊聊sticky定位

前言

你知道position定位有哪些值吗？常规static，绝对定位fixed、absolute，相对定位relative。好吧，这些是个前端都知道。今天要记录的是个不常见的、还在实验阶段的、兼容性不怎么完美的一个值。是的，正如标题提到的，它就是粘性定位sticky。你之前是否听说过呢？当我知道这个定位值后，我震惊了，卧槽，我是个假的前端吧，学前端一年多竟然不知道定位还有个粘性定位。然后我就试了一下这个定位的效果，哇哦，真的很好用，遗憾的是兼容性不够完美，但是现代主流浏览器的较新版本都已经兼容了。

position:sticky

• 描述
  根据MDN上的解释，它首先会按照常规定位方式布局于文档流中，然后再根据文档BFC和最近的containing block（最近的块级祖先元素）定位。它后续的定位不会对后面的元素产生影响。该定位依赖于自身的top、left、bottom、right阀值，所以必须设置其中之一的值sticky才会有效，否则表现为相对定位。
• 我的理解
  元素在视口没有滚动到设定的阀值时，它会表现为static定位（MDN上好像解释说是表现为relative，写的demo上发现top等值并没有表现出相对自身的移动，如理解错误，请千万指出，感谢），当元素被滚动到阀值时，它不会越过阀值，而是表现为fixed定位。
  举个🌰，假设设定了position:sticky; top:20px; 那么该元素初始布局时会按static定位，如果初始的定位在视口的top值小于20px，则它立马就会表现为top：20px的fixed定位；或者初始布局的视口top值大于20px，它正常布局，当滚动窗口时，一旦使它top值到达或者小于20px时，它表现为top：20px的fixed定位，直到它的父元素的底部和它自生底部重合，它就会黏在父元素底部被滚动走。
• 适用场景
  1.随着屏幕滚动，需要一直在视口中的顶部导航
  2.局部的title
  3.其他暂时不知道

测试的示例

// APP.jsx

constructor(props) {
    super(props);
    this.state = {
      todo: {
        A: ["apple", "animal", "approve", "action", "active"],
        B: ["binary", "battle", "boss", "because", "become"],
        C: ["client", "cool", "call", "come", "cake", "case"],
        D: ["decomand", "disappoint", "disagree", "decide", "delay", "date"]
      }
    };
}

render() {
    return (
      <div>
        {Object.keys(this.state.todo).map(key => (
          <div key={key}>
            <div className="letter-head">{key}</div>
            {this.state.todo[key].map(item => (
              <p key={item}>{item}</p>
            ))}
          </div>
        ))}
      </div>
    );
}

/*APP.css*/
.letter-head{
  width: 400px;
  background-color: darkorange;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
}

这个示例是局部title的使用场景。它在ie下是完全不能工作的，不过根据sticky定位的描述，其实是可以通过js监听窗口滚动，动态调整元素的postion定位，一开始布局表现为static，滚动到阀值表现为fixed定位，到达父元素底部表现为相对于父元素的absolute，bottom为0的定位。然而我自己宾没有尝试去实现这样的模拟哈哈哈哈哈哈哈，可以看看stickybits库的实现，应该是比较类似的。