javascript - CSS/JS : fixed header with variable size - dynamic body top-margin

Question

我有一个小型网站元素，我喜欢纯粹使用 html/css 和 js 来完成，没有任何外部脚本等。

我的问题:我有一个在屏幕上始终固定(位置:固定)的标题。向下滚动时，正文会消失在固定标题后面，可能会导致标题增加高度(通过将其他 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*/
    //===========================================================

}

调用上面的函数对头部的任何元素更新操作。希望对您有所帮助!!