CSS中position屬性（sticky）

RobinQu 發布于2019-08-29 18:37 / 2542人閱讀

摘要：我不是最后一個知道的的含義是指定位類型，取值類型可以有和，這里是新發布的一個屬性。當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。在開發中注意兼容性目前仍是一個試驗性的屬性，并不是推薦的標準。

我不是最后一個知道的：position: sticky

position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和sticky，這里sticky是CSS3新發布的一個屬性。

關于這里只講述sticky的用法，關于sticky：

設置了position: sticky的元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。

當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設置了top: 50px，那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動（相當于此時fixed定位）。

元素固定的相對偏移是相對于離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那么是相對于viewport來計算元素的偏移量。

在web開發中注意兼容性：

sticky目前仍是一個試驗性的屬性，并不是W3C推薦的標準。它之所以會出現，也是因為監聽scroll事件來實現粘性布局使瀏覽器進入慢滾動的模式，這與瀏覽器想要通過硬件加速來提升滾動的體驗是相悖的。具體情況可以看下圖，基本上可以說這個屬性使用的瀏覽器只有FireFox和iOS的Safari

小程序自定義導航欄中使用sticky:

sticky是可以再小程序端生效的！
親測這個屬性在自定義導航時特別適用，我也是在糾結自定義導航的fixed適配占位問題時才了解到這個屬性。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114457.html

CSS基礎篇--使用position:sticky 實現粘性布局

摘要：生效規則須指定或四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。并且和同時設置時，生效的優先級高，和同時設置時，的優先級高。設定為元素的任意父節點的屬性必須是，否則不會生效。簡介前面寫了一篇文章講解了position常用的幾個屬性：《CSS基礎篇-- position屬性講解》一般都知道下面幾個常用的： { position: static; position: r...

ybak 2019-08-30 13:52 評論0 收藏0
細說css中的position屬性

摘要：塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。相對定位，相對于自己的初始位置，不脫離文檔流。有過css開發經驗的同學，對于position這個屬性一定不會陌生，然而這個熟悉的屬性確是面試題中的常客，也就說明了該屬性在css的世界是有一定的江湖地位的，那么我們就來詳細的說說position這個屬性。在w3school中是這樣解釋posi...

ssshooter 2019-08-30 14:07 評論0 收藏0
解決頁面滾動時吸頂操作不能及時響應bug

摘要：這個界限就是該元素頂部距離窗口頂部的距離等于該元素設置的值比如以下像素分割線當我的頂部距離窗口頂部為值時，我就會像一樣在距離窗口值處的時代發送分效果圖當頁面滾動到距離黃色區塊頂部時，黃色區塊就會在窗口頂部處，頁面再往下滾動距離也不會變。 position: sticky; fixed 吸頂頁面滾動結束后頁面才渲染需求經常會有這樣的需求，當頁面滾動到某一個位置fixedTopV...

gaomysion 2019-08-30 13:18 評論0 收藏0
解決頁面滾動時吸頂操作不能及時響應bug

摘要：這個界限就是該元素頂部距離窗口頂部的距離等于該元素設置的值比如以下像素分割線當我的頂部距離窗口頂部為值時，我就會像一樣在距離窗口值處的時代發送分效果圖當頁面滾動到距離黃色區塊頂部時，黃色區塊就會在窗口頂部處，頁面再往下滾動距離也不會變。 position: sticky; fixed 吸頂頁面滾動結束后頁面才渲染需求經常會有這樣的需求，當頁面滾動到某一個位置fixedTopV...

wapeyang 2019-08-20 13:29 評論0 收藏0