成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

position: sticky 詳解（防坑指南）

caikeal / 2321人閱讀

摘要：寫這篇文章的原因是無(wú)論中文還是英文關(guān)于的文章，只是說(shuō)了這個(gè)性感的新特性可以拿來(lái)用，簡(jiǎn)單寫一個(gè)完事，并沒(méi)有詳細(xì)的解析它。屬性效果的本意是粘糊糊的，但在中的表現(xiàn)更像是吸附。強(qiáng)調(diào)這一點(diǎn)是因?yàn)樵趯?shí)際使用中，碰到設(shè)置的時(shí)候元素停在某一個(gè)位置不動(dòng)了。

寫這篇文章的原因是無(wú)論中文還是英文關(guān)于 sticky 的文章，只是說(shuō)了 sticky 這個(gè)性感的 css 新特性可以拿來(lái)用，簡(jiǎn)單寫一個(gè) demo 完事，并沒(méi)有詳細(xì)的解析它。我希望這篇文章能幫助大家在使用 sticky 的時(shí)候更順手。

屬性效果

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

導(dǎo)航的效果更像是在頁(yè)面打開(kāi)的時(shí)候是 relative 的，向下滑動(dòng)的時(shí)候 fixed 并且 top：0 為零。

而 sticky 代碼僅需要如下：

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

demo在這,請(qǐng)用 safari 看，幺蛾子的 chrome 需要開(kāi) flag 才能看，兼容性我會(huì)在后面提到。

兼容性


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

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

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

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

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

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

inspired by
mdn

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111641.html

相關(guān)文章

  • vue-sticky組件詳解

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

    phodal 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

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

    phpmatt 評(píng)論0 收藏0

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

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

    zhisheng 評(píng)論0 收藏0

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

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

    ybak 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<