position: sticky 属性
關于 position 屬性主要有五個值:
static relative fixed absolute sticky常見的就是 relative 和 absolute 這兩個屬性。
relative 表示,相對于默認位置(即static時的位置)進行偏移,即定位基點是元素的默認位置。
absolute 表示,相對于上級元素(一般是父元素)進行偏移,即定位基點是父元素。
比較復雜的是 sticky 屬性。
sticky 跟前面屬性值都不一樣,它會產生動態效果,很像 relative 和 fixed 的結合:一些時候是 relative 定位(定位基點是自身默認位置),另一些時候自動變成 fixed 定位(定位基點是視口)。
因此,它能夠形成"動態固定"的效果。比如,網頁的搜索工具欄,初始加載時在自己的默認位置(relative定位)。
頁面向下滾動時,工具欄變成固定位置,始終停留在頁面頭部(fixed定位)。
等到頁面重新向上滾動回到原位,工具欄也會回到默認位置。
sticky 生效的前提是,必須搭配 top、bottom、left、right 這四個屬性一起使用,不能省略,否則等同于 relative 定位,不產生"動態固定"的效果。原因是這四個屬性用來定義"偏移距離",瀏覽器把它當作 sticky 的生效門檻。
它的具體規則是,當頁面滾動,父元素開始脫離視口時(即部分不可見),只要與 sticky 元素的距離達到生效門檻,relative 定位自動切換為 fixed 定位;等到父元素完全脫離視口時(即完全不可見),fixed 定位自動切換回 relative 定位。
請看下面的示例代碼。(注意,除了已被淘汰的 IE 以外,其他瀏覽器目前都支持 sticky。但是,Safari 瀏覽器需要加上瀏覽器前綴-webkit-。)
#toolbar {position: -webkit-sticky; /* safari 瀏覽器 */position: sticky; /* 其他瀏覽器 */top: 20px; }上面代碼中,頁面向下滾動時,#toolbar 的父元素開始脫離視口,一旦視口的頂部與 #toolbar 的距離小于 20px(門檻值),#toolbar 就自動變為 fixed 定位,保持與視口頂部 20px 的距離。頁面繼續向下滾動,父元素徹底離開視口(即整個父元素完全不可見),#toolbar 恢復成 relative 定位。
大型表格滾動的時候,表頭始終固定,也可以用 sticky 實現。
CSS 代碼也很簡單。
th {position: sticky;top: 0; }需要注意的是,sticky 必須設在?<th>?元素上面,不能設在?<thead>?和?<tr>?元素,因為這兩個元素沒有 relative 定位,也就無法產生 sticky 效果。
總結
以上是生活随笔為你收集整理的position: sticky 属性的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: android 背景图缩放,androi
- 下一篇: 席慕容的诗歌——《我愿为莲》