大家可以看到,我的滾動(dòng)條處于頂端的時(shí)候,頭部的菜單也處于頂端。
當(dāng)我滾動(dòng)的時(shí)候,大家發(fā)現(xiàn)頭部的菜單隨著我一起滾動(dòng)了,眾所周知啊,display:fixed,能夠使元素固定在頁(yè)面中的某一塊,但是會(huì)脫離文檔流,也就是說(shuō),原本元素所在的位置會(huì)被認(rèn)為沒(méi)有東西,其他元素就會(huì)靠過(guò)來(lái)。
如果我們直接給頭部元素設(shè)置fixed的話。會(huì)出現(xiàn)這樣的結(jié)果。
因?yàn)轭^部脫離了文檔流,所以底部的輪播往上靠過(guò)去,又因?yàn)楸尘邦伾前咨猿霈F(xiàn)了被脫離文檔流的頭部元素遮蓋住了以下的元素,那么我們?cè)趺幢苊膺@種情況發(fā)生呢?
首先我們給頭部父元素元素設(shè)定一個(gè)固定的高度,先不要設(shè)置fixed,我們可以利用jq的判斷滾動(dòng)高度,當(dāng)高度大于0的才給設(shè)置fiexd,所以就像頭部菜單隨著我們滾動(dòng)一樣,頭部也因?yàn)橛懈冈氐母叨葥沃粫?huì)往上靠過(guò)去,而多出來(lái)的100像素顏色會(huì)被fixed的子元素蓋住。這樣就達(dá)成了跟隨滾動(dòng)的效果。