Javascript CSS/JS：大小可变的固定标题-动态正文顶部边距

我有一个小的网站项目，我喜欢做纯粹的html/css和js没有任何外部脚本等

我的问题是： 我在屏幕上得到了一个始终固定的标题（位置：fixed）。向下滚动时，主体消失在固定标题后面，可能会导致标题高度增加（通过在标题上附加其他div）

当物品以另一种顺序堆放时，这种情况也会发生在移动显示器上。（此im使用css网格）

现在，我当然想避免主体被标题重叠。

如果标题的宽度不变，我可以在主体上加上一些上边距，我就完成了。但既然不是这样，我想知道是否有一个优雅的解决方案

---

我的第一个想法是使用setInterval（）并不断检查页眉的大小，然后像这样调整正文的边距。。。但这似乎不对我是否可以直接将正文的边距链接到页眉的高度？

制作一个编辑页眉元素的单一功能

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

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

}

函数editHeader（“/”，“/”）{
/*添加或删除标题元素*/
//===========================================================
/*通过计算当前页眉高度来设置正文边距的样式*/
//===========================================================
}

---

调用上述函数以执行标头上的任何元素更新操作。希望能有帮助

如果您与帖子共享代码会更好。顺便说一句，您可以使用

vh

css单元代替llikr：

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

---

使用

vh

可以设置相对于身高的边距。这可能会有帮助。但是如果你的页眉有太多的内容，考虑使用面包屑将它们折叠到小屏幕上。

也许你可以使用“粘性页脚”的概念，并将其复制到页眉中。