聊聊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庫的實現，應該是比較相似的。