聊聊sticky定位

zhoutk 發布于2019-08-30 15:43 / 2320人閱讀

摘要：前言你知道定位有哪些值嗎常規，絕對定位，相對定位。是的，正如標題提到的，它就是粘性定位。它后續的定位不會對后面的元素產生影響。該定位依賴于自身的閥值，所以必須設置其中之一的值才會有效，否則表現為相對定位。

前言

你知道position定位有哪些值嗎？常規static，絕對定位fixed、absolute，相對定位relative。好吧，這些是個前端都知道。今天要記錄的是個不常見的、還在實驗階段的、兼容性不怎么完美的一個值。是的，正如標題提到的，它就是粘性定位sticky。你之前是否聽說過呢？當我知道這個定位值后，我震驚了，臥槽，我是個假的前端吧，學前端一年多竟然不知道定位還有個粘性定位。然后我就試了一下這個定位的效果，哇哦，真的很好用，遺憾的是兼容性不夠完美，但是現代主流瀏覽器的較新版本都已經兼容了。

position:sticky

描述
根據MDN上的解釋，它首先會按照常規定位方式布局于文檔流中，然后再根據文檔BFC和最近的containing block（最近的塊級祖先元素）定位。它后續的定位不會對后面的元素產生影響。該定位依賴于自身的top、left、bottom、right閥值，所以必須設置其中之一的值sticky才會有效，否則表現為相對定位。

我的理解
元素在視口沒有滾動到設定的閥值時，它會表現為static定位（MDN上好像解釋說是表現為relative，寫的demo上發現top等值并沒有表現出相對自身的移動，如理解錯誤，請千萬指出，感謝），當元素被滾動到閥值時，它不會越過閥值，而是表現為fixed定位。
舉個

GPU云服務器云服務器 sticky定位 Sticky 聊聊 CSS Sticky

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

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

css 聊聊position屬性

摘要：默認值當元素的屬性沒有設置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設置相對定位的元素仍然處于文檔流中，其占據的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。前言今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經驗。標準根據MDN文檔，CS...

GHOST_349178 2019-08-01 18:04 評論0 收藏0
css 聊聊position屬性

摘要：默認值當元素的屬性沒有設置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設置相對定位的元素仍然處于文檔流中，其占據的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。前言今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經驗。標準根據MDN文檔，CS...

OpenDigg 2019-08-29 13:51 評論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