前言 sticky這種設計效果是經常出現的，比如陶寶右側的工具欄，當我們向下滾動到它的位置時，它就會黏住頂部跟隨滾動，類似position: fixed的效果，只不過它的觸發條件是當我們滾動到所在位置時，才觸發fixed的效果的： 我們經常的做法是用JavaScript去監聽滾動事件然後進行處理，比 ...
前言
sticky這種設計效果是經常出現的，比如陶寶右側的工具欄，當我們向下滾動到它的位置時，它就會黏住頂部跟隨滾動，類似position: fixed的效果，只不過它的觸發條件是當我們滾動到所在位置時，才觸發fixed的效果的：
我們經常的做法是用JavaScript去監聽滾動事件然後進行處理，比如會用到類似stickyjs的一些插件 http://stickyjs.com/ ，從2017年左右開始css中的position:sticky就是為了這中設計而誕生的，今天我們來認識一下它。
相容性
差不多兩年時間了，相容性還算可以的，對於那種面向技術人員，後臺管理人員的項目，我倒是覺得可以用上，畢竟他們只是升級一下瀏覽器不僅能體驗更好的效果，也能降低碼農的工作量：
https://caniuse.com/#search=position%3A%20sticky
學習使用
我們來實現陶寶右側的效果，就特別簡單了，沒什麼好學的，直接設置就行了：
.sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
簡單例子: https://jsbin.com/vivixezule/edit?html,css,output
還有一種設計效果，比如疊加效果也能實現，還有很多效果，具體大家可以根據sticky特性自由發揮： 疊加效果： https://jsbin.com/fegiqoquki/edit?html,css,output
特性
position:sticky有個非常重要的特性，那就是sticky元素效果完全受制於父級元素們們們。如果你發現你設置了不起效果，可以檢查以下兩個原因：
- 父級元素不能有任何
overflow:visible以外的overflow設置，否則沒有效果，因為改變了滾動容器（即使沒有出現滾動條）。 - 父級元素高度過小，根本不夠stikcy塊的滾動，就會沒有效果。
嘮叨
近幾年Web開發語言都在互相協作著，這種協作是一種促進，有時候我們總調侃學不動了，一直在變化，可是哪知道這些變化反而解決了我們的痛點，也許你習慣了，覺得不是痛點不去學，但是不能否認你學會之後，你會說以前太痛了，再也不想回去了，就像學會vue，react, angular 等，再回去jquery真的覺得有點痛苦了，但你不想學之前，總覺得jQuery不怎麼痛，你習慣了。
前後端的分離讓 JS接替了部分後端語言的工作，比如數據綁定交互等；css接替了部分JS工作，比如動畫和各種常見設計效果等，各種語言都在共同協作著，只是為瞭解決碼農痛點，我們能做的就是抽空瞄一眼，試一試，學一學 ，利永遠大於弊，學習的時間不僅可以為你大大的節省開發時間，更會讓你擁有愉悅的編程體驗
