带有淡入通知栏的jQuery冻结DIv头

我有一个冻结的div（使用css position:fixed；property冻结），用作网站的标题。div后面（或div下面）是网页的主体或其余部分

通知栏将淡入使用

 jQuery ($bar).fadeIn(6000).delay(4900).fadeOut();

此jQuery将通过Javascript

setInterval

函数每24秒运行一次

我的问题是冻结div下面的内容设置为padding top:36px，以确保冻结div不会覆盖或显示在主体上。当通知div淡入时，将发生此问题。当这种情况发生时，高度将发生变化（技术上），标题内容将悬停在主体上。如何使主体向下移动，或不被覆盖？

在冻结div的

主体

标记之前使用jQuery的

Prepend（）

方法

参见我的示例：

然后，当酒吧淡入时：

document.getElementById('bodyID').style.marginTop = whatever-it-needs-to-be+'px';

---

您可以始终使用

相对

然后

绝对

定位；将身体内容包装在块级元素中（如

div

），然后将身体内容

的
位置设置为相对
，并将
top
属性设置为
36px

<div id="header">
    <!--
    *   Site banner
    -->
</div>
<div id="body_wrapper">
    <div id="body_content">
        <!--
        *   Page content
        -->
    </div>
</div>

只需在现有样式表中实现CSS

<div id="header">
    <!--
    *   Site banner
    -->
</div>
<div id="body_wrapper">
    <div id="body_content">
        <!--
        *   Page content
        -->
    </div>
</div>

#header {
    position:fixed;
    /*  Other styles */
}
#body_wrapper {
    position:relative;
    /*  Other styles */
}
#body_content {
    position:absolute;
    top:36px;
    /*  Other styles */
}