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

时间:2014-08-26 07:29:36

标签: javascript jquery html css

我有#header并且有#page。

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

enter image description here

红色位是#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);
        }
    });

1 个答案:

答案 0 :(得分:4)

试试这个。

  

body {position:relative}

     

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

     

#page {position:absolute;顶部:0; }

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

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