Question

我有一个冻结的div（使用css position：fixed; property冻结），它充当网站的标题。在div之后（或在div之下）是网页的正文或其余部分。

通知栏将使用

淡入

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

这个jQuery将通过Javascript setInterval函数每24秒运行一次。

我的问题是，冻结div下的内容设置为填充顶部：36px以确保冻结的div不覆盖或显示在身体上。通知div淡入时会出现此问题。当发生这种情况时，高度将发生变化（技术上），标题的内容将悬停在正文上。如何让身体向下移动或不被覆盖？

Answer 1

在冻结div的Prepend()标记之前使用jQuery的body方法

查看我的示例： http://jsfiddle.net/uday99/XYJBy/

Answer 2

document.getElementById('bodyID').style.marginTop = height-of-header+'px';

然后当酒吧消失：

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

Answer 3

您可以随时使用relative然后absolute定位;将您的正文内容包装在块级元素中（如div），然后制作正文内容的position relative并将top属性设置为{{1 }}

36px

然后在你的CSS中

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

只需将CSS实现到现有的样式表中即可。

jQuery Frozen DIv Header with Fade in Notification Bar

3 个答案: