东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
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)

    因?yàn)轭^部脫離了文檔流,所以底部的輪播往上靠過去,又因?yàn)楸尘邦伾前咨?,所以出現(xiàn)了被脫離文檔流的頭部元素遮蓋住了以下的元素,那么我們怎么避免這種情況發(fā)生呢?

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

    首先我們給頭部父元素元素設(shè)定一個固定的高度,先不要設(shè)置fixed,我們可以利用jq的判斷滾動高度,當(dāng)高度大于0的才給設(shè)置fiexd,所以就像頭部菜單隨著我們滾動一樣,頭部也因?yàn)橛懈冈氐母叨葥沃粫峡窟^去,而多出來的100像素顏色會被fixed的子元素蓋住。這樣就達(dá)成了跟隨滾動的效果。

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

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