由position sticky 想到的

2021-07-08 10:43:01 字數 373 閱讀 4442

這個ui的主要核心思想是:1級分類導航,當導航目錄項scroll到螢幕最頂上時,就暫時固定住,這時scroll的內容就是這個目錄下的內容,直到此目錄內容全部顯示完畢後,才會整體向下滾動

position:sticky;的乙個問題就是,內部的垂直scroll時,原來整個網頁上面的內容是看不到的,使用者相當於進入了乙個區域性鎖定的context中

好處就是,區域性的內容垂直方向上有個更大的scroll空間;注意,這跟水平scroll是2種不同的風格,後者一般只用於swipe場景

順帶說一下,亞馬遜**的書內容介紹一開始在mac chrome下沒辦法scroll,這種問題我都很想報個bug(amazon顯然應該對使用者使用的所有終端都做測試的!),但找不到鏈結位址,不過最近他們解決了這個bug。

粘性布局position sticky

開篇 頁面開發中常用到固定定位fixed,不過fixed會浮動脫離文件流,於是又要清除浮動,即麻煩有時又未必能夠清除浮動,於是sticky華麗出場 介紹 sticky是css3中新增的position屬性,設定了sticky的元素,在螢幕範圍 viewport 內該元素的位置並不受到定位影響 設定是...

使用 position sticky 實現粘性布局

如果問,css 中 position 屬性的取值有幾個?大部分人的回答是,大概是下面這幾個吧?額,其實,我們還可以有這 3 個取值 沒了嗎?偶然發現其實還有乙個處於實驗性的取值,position sticky 戳我檢視mdn解釋 臥槽,什麼來的?前端發展太快,新東西目接不暇,但是對於有趣的東西,還是...

使用 position sticky 實現粘性布局

如果問,css 中 position 屬性的取值有幾個?大部分人的回答是,大概是下面這幾個吧?1 2 3 4 5 6 額,其實,我們還可以有這 3 個取值 1 2 3 4 5 6 沒了嗎?偶然發現其實還有乙個處於實驗性的取值,position sticky 戳我檢視mdn解釋 1 2 3 臥槽,什麼...