久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

22
2023/12

網(wǎng)頁中頭部菜單滾動跟隨且不會造成頁面塌陷

發(fā)布時間:2023-12-22 15:15:40
發(fā)布者:忠!誠!
瀏覽量:
0

    大家可以看到,我的滾動條處于頂端的時候,頭部的菜單也處于頂端。 

    當(dāng)我滾動的時候,大家發(fā)現(xiàn)頭部的菜單隨著我一起滾動了,眾所周知啊,display:fixed,能夠使元素固定在頁面中的某一塊,但是會脫離文檔流,也就是說,原本元素所在的位置會被認(rèn)為沒有東西,其他元素就會靠過來。

    如果我們直接給頭部元素設(shè)置fixed的話。會出現(xiàn)這樣的結(jié)果。

 網(wǎng)頁中頭部菜單滾動跟隨 (3)

    因為頭部脫離了文檔流,所以底部的輪播往上靠過去,又因為背景顏色是白色,所以出現(xiàn)了被脫離文檔流的頭部元素遮蓋住了以下的元素,那么我們怎么避免這種情況發(fā)生呢?

網(wǎng)頁中頭部菜單滾動跟隨 (2)

    首先我們給頭部父元素元素設(shè)定一個固定的高度,先不要設(shè)置fixed,我們可以利用jq的判斷滾動高度,當(dāng)高度大于0的才給設(shè)置fiexd,所以就像頭部菜單隨著我們滾動一樣,頭部也因為有父元素的高度撐著不會往上靠過去,而多出來的100像素顏色會被fixed的子元素蓋住。這樣就達成了跟隨滾動的效果。

網(wǎng)頁中頭部菜單滾動跟隨 (1)

關(guān)鍵詞:
返回列表