網(wǎng)站頂部的導(dǎo)航欄固定與否,顯示隱藏與否的問題?
如果不固定(position: relative)沸版,那么滾屏?xí)r琢唾,導(dǎo)航欄就看不到了,如果需要定位點(diǎn)擊導(dǎo)航欄的某個(gè)選項(xiàng)跳轉(zhuǎn)頁面時(shí)比較麻煩和敬,要先返回頂部凹炸,然后再點(diǎn)擊跳轉(zhuǎn)。
如果固定(position:fixed)昼弟,那么無論滾屏與否啤它,始終有個(gè)導(dǎo)航欄浮在頁面內(nèi)容上面,特別是第一屏內(nèi)容舱痘,會(huì)被擋住某部分变骡,當(dāng)然對(duì)第一屏處理一下就行了。
雖然用js控制css芭逝,可以實(shí)現(xiàn)兩種方式的結(jié)合塌碌,但是在手機(jī)端的會(huì)出現(xiàn)其他問題。就想有沒有兩者結(jié)合的css屬性铝耻,結(jié)果找到了粘性布局屬性position:sticky誊爹,當(dāng)然兼容性還不太好。但是這篇文章(position:sticky實(shí)現(xiàn)iOS6+下的粘性布局瓢捉,相關(guān)代碼栗子)频丘,可以解決這個(gè)問題。
到這里泡态,已經(jīng)挺不錯(cuò)了搂漠。但是我還想更好點(diǎn)。
- 頁面一出來導(dǎo)航欄位于最頂部
- 滾屏?xí)r某弦,導(dǎo)航欄浮在頂部桐汤,不會(huì)消失而克。
- 滾多屏?xí)r,不想看到導(dǎo)航欄怔毛,當(dāng)我需要關(guān)注時(shí)在出現(xiàn)再頂部员萍。
到目前為止只解決了前面2點(diǎn)。最后一點(diǎn)拣度,通過搜索碎绎,找到了,一個(gè)好的思路抗果,就是IBM官網(wǎng)的導(dǎo)航欄筋帖。