殺了個回馬槍，還是說說position:sticky吧
byzhangxinxu from ofollow,noindex" target="_blank">https://www.zhangxinxu.com/wordpress/?p=8244
本文可全文轉載，個人網站無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。
一、Chrome殺了個回馬槍
position:sticky 早有耳聞也有所瞭解，後來，Chrome放棄了對其支援，我也就不關心這個聲明瞭，今天偶然發現，臥槽，Chrome什麼時候殺了個回馬槍，居然又支援了。眼瞅著，各個瀏覽器紛紛立了山頭，要必要關心關心 position:sticky 了，不要被人留下厚此薄彼的口舌。
Safari目前還需要-webkit-私有字首。
二、position:sticky簡介
單詞sticky的中文意思是“粘性的”， position:sticky 表現也符合這個粘性的表現。基本上，可以看出是 position:relative 和 position:fixed 的結合體——當元素在螢幕內，表現為relative，就要滾出顯示器螢幕的時候，表現為fixed。例如，可以滾動下面這個框框感受下互動表現：
其中導航元素設定瞭如下CSS：
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
}
於是，正如大家看到，隨著頁面的滾動，當導航距離上邊緣0距離的時候，黏在了上邊緣，表現如同 position:fixed 。
//zxx: position:sticky要想生效，top屬性或則left屬性（看滾動方向）是必須要有明確的計算值的，否則fixed的表現不會出現。
這就是 position:sticky 最基本的表現，特別適合導航的跟隨定位效果。
很多人以為 position:sticky 就上面這點效果，就好像以為就是個平常的史萊姆一樣，實際上， position:sticky 可以實現價效比極高，甚至還有點小酷的互動佈局效果。嘿嘿，這可是皇帝的夜壺——不是人人都能看到的喲。
三、富有層次的滾動互動
滾動下面這個嵌入頁面的滾動條，我們可以看到新聞標題依次推上去，網友評論也會在恰當的時間從背後鑽出來。
如果上面頁面顯示不出來，可以狠狠地點選這裡： position:sticky實現的富有層次的滾動互動demo
GIF錄屏效果如下：
四、你可能不知道的position:sticky
position:sticky 有個非常重要的特性，那就是 sticky元素效果完全受制於父級元素們 。
這和 position:fixed 定位有著根本性的不同，fixed元素直抵頁面根元素，其他父元素對其left/top定位無法限制。
根據我簡單的測試，發現了sticky元素以下一些特性表現：
- 父級元素不能有任何
overflow:visible以為的overflow設定，否則沒有粘滯效果。因為改變了滾動容器（即使沒有出現滾動條）。因此，如果你的position:sticky無效，看看是不是某一個祖先元素設定了overflow:hidden，移除之即可。 - 同一個父容器中的sticky元素，如果定位值相等，則會重疊；如果屬於不同父元素，則會鳩佔鵲巢，擠開原來的元素，形成依次佔位的效果。
- sticky定位，不僅可以設定
top，基於滾動容器上邊緣定位；還可以設定bottom，也就是相對底部粘滯。如果是水平滾動，也可以設定left和right值。
下面，我們再看看看富有層次的滾動效果的實現原理。
五、層次滾動實現原理
首先，HTML結構如下（結構很重要）：
<article> <section> <h4>網曝王寶強毆打馬蓉</h4> <content> <p>12月2日，有網友爆料稱...</p> </content> <footer>網友評論：...</footer> </section> <section> <h4>知情人爆料稱馬蓉闖入王寶強家拿剪刀對峙</h4> <content> <p>...</p> </content> <footer>網友評論：...</footer> </section> ... </article>
其中，標題 <h4> 和底部 <footer> 設定了sticky定位，如下：
article h4,
h4 {
position: sticky;
top: 0;
z-index: 1;
}
content {
position: relative;
}
footer {
position: sticky;
bottom: 50vh;
z-index: -1;
}
由於每一段短新聞都在section標籤中，屬於不同的父元素，因此，滾動的時候，後面的新聞標題才能把前面已經sticky定位的新聞標題推開，這是sticky定位天然的特性，無需任何JavaScript的幫助。
如果，我們這裡的HTML結構做調整，標題都是平級的，如下：
<article> <section> <h4>網曝王寶強毆打馬蓉</h4> <content> <p>12月2日，有網友爆料稱...</p> </content> <footer>網友評論：...</footer> <!-- 下一個短新聞 --> <h4>知情人爆料稱馬蓉闖入王寶強家拿剪刀對峙</h4> <content> <p>...</p> </content> <footer>網友評論：...</footer> </section> ... </article>
則最終效果是所有sticky定位的新聞標題都會重疊在一起，這並不是我們想要的效果。所以，記住了， position:sticky 佈局的時候，使用合適的HTML結構很重要。
效果中，網友評論從後面鑽出來的效果又是如何實現的呢？
兩個關鍵點：
- 定位用的
bottom，效果和top正好是對立的。設定top粘滯的元素隨著往下滾動，是先滾動後固定；而設定bottom粘滯的元素則是先固定，後滾動； -
z-index:-1讓網友評論footer元素藏在了content的後面，於是才有了“猶抱琵琶半遮面”的效果。
六、男人這輩子最重要的是什麼？
這男人這輩子，最重要的一件事情，不是高考勝敗，或者某場比賽輸贏，最重要的絕對是找一個靠譜的老婆！
好的老婆可以讓你不斷進步，不斷成長，一往無前，蒸蒸日上。正所謂一個成功男人的背後總有一個默默支援他的女人！而一個糟糕的老婆，……看看王寶強，我就不多說什麼了。
所以，在座的諸位年輕才俊們，作為過來人，一定要給你們一些建議：找老婆，外表絕對不是最重要的，內心的品質絕對是最最重要的。那種性格暴烈，或者自卑壓抑，或者好逸惡勞，或者總是損你貶你的女人，一定要敬而遠之，至少千萬不要邁進婚姻的殿堂。
這就像一個蝴蝶效應，你們要相處40年甚至更久，平時看似微不足道對你的不好的影響，那日積月累就會質變；反之，如果是賢妻，久而久之，你就會慢慢超越那些家門不幸的男人，成為所謂成功的男人。
這遠比你一場成功的面試，或者中一次錦鯉重要太多太多了。
皮囊不重要，關鍵內在，內在！
謹記！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8244
（本篇完）