CSS / JS：可變大小的固定標頭-動態主體頂邊距

Question

我有一個小型網站項目，我想完全使用html / css和js來做，而無需任何外部腳本等。

我的問題：我的標題始終在屏幕上固定（ position：fixed ）。 向下滾動時，主體消失在固定標題的后面，並可能導致標題的高度增加 （通過將其他div附加到標題）。

當物品以另一順序堆疊時，這也可能在移動顯示器上發生。 （為此即時通訊使用css網格）

現在，我當然想避免主體與標題重疊。

如果標題的寬度恆定，我可以在主體上應用一些頂邊距，然后完成。 但是既然不是這種情況，我想知道是否有一個優雅的解決方案...

我的第一個想法是使用setInterval（）並不斷檢查標頭的大小並像這樣調整主體的邊距...但這似乎不正確。 我能以某種方式直接將身體的邊緣與床頭的高度聯系起來嗎？

Answer 1

使一個函數可以編輯標題的元素。

function editHeader("<add>/<remove>", "<data>"/<element_obj>){
    /*Add or remove header elements*/

    //===========================================================
    /* Style your body margin by calculating the current header height*/
    //===========================================================

}

對標頭上的任何元素更新操作調用以上函數。 希望能幫助到你！！

Answer 2

如果您與帖子共享代碼會更好。 順便說一句，您可以使用vh css單位代替llikr：

.header{
   position: fixed;
   margin-top: 5vh;
}

使用vh可以設置相對於身高的邊距。 這可能會有所幫助。 但是如果標題過多，請考慮使用面包屑將其折疊在小屏幕上。