国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

position: sticky 詳解（防坑指南）

caikeal / 2279人閱讀

摘要：寫這篇文章的原因是無論中文還是英文關(guān)于的文章，只是說了這個性感的新特性可以拿來用，簡單寫一個完事，并沒有詳細的解析它。屬性效果的本意是粘糊糊的，但在中的表現(xiàn)更像是吸附。強調(diào)這一點是因為在實際使用中，碰到設(shè)置的時候元素停在某一個位置不動了。

寫這篇文章的原因是無論中文還是英文關(guān)于 sticky 的文章，只是說了 sticky 這個性感的 css 新特性可以拿來用，簡單寫一個 demo 完事，并沒有詳細的解析它。我希望這篇文章能幫助大家在使用 sticky 的時候更順手。

屬性效果

sticky 的本意是粘糊糊的，但在 css 中的表現(xiàn)更像是吸附。常見的吸頂、吸底（移動端網(wǎng)站的頭部返回欄，底部切換欄之類）的效果用這個屬性非常適合。例如下圖中的導(dǎo)航，也可以點鏈接看實際效果。

導(dǎo)航的效果更像是在頁面打開的時候是 relative 的，向下滑動的時候 fixed 并且 top：0 為零。

而 sticky 代碼僅需要如下：

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

demo在這,請用 safari 看，幺蛾子的 chrome 需要開 flag 才能看，兼容性我會在后面提到。

兼容性


所以放心大膽的在 ios 上用吧。
polyfill

如果是檢測瀏覽器是否支持 sticky 我更建議使用如下代碼：

if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
    // 支持 sticky
}
特性（坑）

1、sticky 不會觸發(fā) BFC。如果不知道 BFC 可以看這里。

2、樣式表 z－index 無效。行內(nèi) style 寫有效。

3、sticky 是容器相關(guān)的，也就說 sticky 的特性只會在他所處的容器里生效。這個比較抽象，demo 在這里，看完之后就懂了。強調(diào)這一點是因為在實際使用中，碰到 body 設(shè)置 height：100% 的時候 sticky 元素停在某一個位置不動了。

inspired by
mdn

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111641.html

相關(guān)文章

  • vue-sticky組件詳解

    摘要：但當(dāng)該元素的位置移出設(shè)置的視圖范圍時，其定位效果將變成，并根據(jù)設(shè)置的等作為其定位參數(shù)。另外，筆者在網(wǎng)上找過相關(guān)的組件。面向人群急于使用組件的同學(xué)。若頁面大小發(fā)現(xiàn)變化，原顯示的位置可能與頁面變化后的不一致。 sticky簡介 sticky的本意是粘的，粘性的，使用其進行的布局被稱為粘性布局。 sticky是position屬性新推出的值，屬于CSS3的新特性，常用與實現(xiàn)吸附效果。 設(shè)置...

    phodal 評論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對底部前端掘金來自國外的設(shè)計達人，純，可以實現(xiàn)當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計達人，純CSS，可以實現(xiàn): 當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。當(dāng)改變窗口高度時，不會出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個CSS底部布局方案...

    phpmatt 評論0 收藏0

  • 前端學(xué)習(xí)資源

    摘要：提供了完整的環(huán)境，并且支持自定義域名指向，動態(tài)計算資源調(diào)整，可以完成各種應(yīng)用的開發(fā)編譯與部署。 react 新特性 react16 Context 算法相關(guān) 圖解排序算法(二)之希爾排序 微信小程序 微信小程序組件化的解決方案移動端尺寸基本知識 瀏覽器 前端必讀：瀏覽器內(nèi)部工作原理瀏覽器緩存原理解讀瀏覽器加載css和js及dom解析之間的關(guān)系瀏覽器緩存 CSS學(xué)習(xí) 移動web開發(fā)布局入...

    zhisheng 評論0 收藏0

  • CSS基礎(chǔ)篇--使用position:sticky 實現(xiàn)粘性布局

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

    ybak 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<