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

資訊專欄INFORMATION COLUMN

CSS中position屬性（sticky）

RobinQu / 2558人閱讀

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

我不是最后一個知道的：position: sticky 
position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和sticky，這里sticky是CSS3新發(fā)布的一個屬性。
關(guān)于這里只講述sticky的用法，關(guān)于sticky：

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

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

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

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

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

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

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

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

相關(guān)文章

  • 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

  • 細說css中的position屬性

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

    ssshooter 評論0 收藏0

  • 解決頁面滾動時吸頂操作不能及時響應bug

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

    gaomysion 評論0 收藏0

  • 解決頁面滾動時吸頂操作不能及時響應bug

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

    wapeyang 評論0 收藏0

發(fā)表評論

0條評論

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