javascript - 将固定标题效果应用于非固定标题

Question

我有#header 和#page。

两者都是相对定位的，我不想让标题固定，但我希望它与#page 重叠。

红色部分是#header，深绿色部分是#page。我试图让#header 与#page 重叠，但让#page 的内容远离#header!

我试图应用来完成这项工作的理论是。

1) 找到#header 的.outerHeight2)两倍的高度3)将它作为padding-top应用到#page4) 应用未加倍的高度作为 mince margin-top

请帮忙，我不知道如何让它工作，这是我一直在使用的:

$(window).on("ready resize", function() {
        if (window.innerWidth > 1024) {
            var pageTop = $("#header.header-overlay .content").outerHeight() + "px";
            $("#page").css("padding-top", pageTop);
        } else {
            var pageTop = $("#secondHeader").outerHeight() + "px";
            $("#page").css("padding-top", pageTop);
        }
    });

Answer 1

试试这个。

body{ position:relative }

#header{ position:absolute; z-index:10; }

#page{ position:absolute; top:0; }

padding-top = 计算标题的高度。

同时检查图像应用为背景的 div。