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

Question

我有#header并且有#page。

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

红色位是#header，深绿色是#page。我试图让#header重叠#page，但保持#page的内容远离#header！

我试图申请这项工作的理论是。

1）找到#header的.outerHeight 2）加倍高度 3）将其作为填充顶部应用于#page 4）将高度不加倍作为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;顶部：0; }

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

同时检查图像应用于哪个div作为背景。