菜鳥教程
sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動(dòng)位置來(lái)定位。
粘性定位的元素是依賴于用戶的滾動(dòng)，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像 position:fixed;，它會(huì)固定在目標(biāo)位置。
元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。
這個(gè)特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下實(shí)例)。

簡(jiǎn)單示例

image.png

res.gif

是不是非常簡(jiǎn)單，但是需要注意的地方也比較多。比如：粘性布局只在其父元素空間內(nèi)生效啦，父元素中不能設(shè)置 overflow: hidden 或 overflow: auto啦等等。可以上手練習(xí)一下。