css position:sticky的嘗試

前言

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元素效果徹底受制於父級元素們們們。若是你發現你設置了不得效果，能夠檢查如下兩個緣由：

1. 父級元素不能有任何overflow:visible之外的overflow設置，不然沒有效果，由於改變了滾動容器（即便沒有出現滾動條）。
2. 父級元素高度太小，根本不夠stikcy塊的滾動，就會沒有效果。

嘮叨

近幾年Web開發語言都在互相協做着，這種協做是一種促進，有時候咱們總調侃學不動了，一直在變化，但是哪知道這些變化反而解決了咱們的痛點，也許你習慣了，以爲不是痛點不去學，可是不可否認你學會以後，你會說之前太痛了，不再想回去了，就像學會vue，react, angular 等，再回去jquery真的以爲有點痛苦了，但你不想學以前，總以爲jQuery不怎麼痛，你習慣了。

先後端的分離讓 JS接替了部分後端語言的工做，好比數據綁定交互等；css接替了部分JS工做，好比動畫和各類常見設計效果等，各類語言都在共同協做着，只是爲了解決碼農痛點，咱們能作的就是抽空瞄一眼，試一試，學一學 ，利永遠大於弊，學習的時間不只能夠爲你大大的節省開發時間，更會讓你擁有愉悅的編程體驗 🙂