css中position:sticky的示例分析

小編給大家分享一下css中position:sticky的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css position:sticky的嘗試

前言

sticky這種設(shè)計(jì)效果是經(jīng)常出現(xiàn)的，比如陶寶右側(cè)的工具欄，當(dāng)我們向下滾動到它的位置時，它就會黏住頂部跟隨滾動，類似position: fixed的效果，只不過它的觸發(fā)條件是當(dāng)我們滾動到所在位置時，才觸發(fā)fixed的效果的：

我們經(jīng)常的做法是用JavaScript去監(jiān)聽滾動事件然后進(jìn)行處理，比如會用到類似stickyjs的一些插件 http://stickyjs.com/ ，從2017年左右開始css中的position:sticky就是為了這中設(shè)計(jì)而誕生的，今天我們來認(rèn)識一下它。

兼容性

差不多兩年時間了，兼容性還算可以的，對于那種面向技術(shù)人員，后臺管理人員的項(xiàng)目，我倒是覺得可以用上，畢竟他們只是升級一下瀏覽器不僅能體驗(yàn)更好的效果，也能降低碼農(nóng)的工作量

學(xué)習(xí)使用

我們來實(shí)現(xiàn)陶寶右側(cè)的效果，就特別簡單了，沒什么好學(xué)的，直接設(shè)置就行了：

.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

還有一種設(shè)計(jì)效果，比如疊加效果也能實(shí)現(xiàn)，還有很多效果，具體大家可以根據(jù)sticky特性自由發(fā)揮： 疊加效果： https://jsbin.com/fegiqoquki/edit?html,css,output

特性

position:sticky有個非常重要的特性，那就是sticky元素效果完全受制于父級元素們們們。如果你發(fā)現(xiàn)你設(shè)置了不起效果，可以檢查以下兩個原因：

1. 父級元素不能有任何overflow:visible以外的overflow設(shè)置，否則沒有效果，因?yàn)楦淖兞藵L動容器（即使沒有出現(xiàn)滾動條）。

2. 父級元素高度過小，根本不夠stikcy塊的滾動，就會沒有效果。

以上是“css中position:sticky的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！