jQuery заголовок Frozen DIv с исчезновением в панели уведомлений

Question

У меня есть замороженный div (замороженный с использованием css position: fixed; property), который служит заголовком для веб-сайта.Сразу после div (или под div) будет тело или остальная часть веб-страницы.

Панель уведомлений исчезнет при использовании

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

Этот jQuery будет запускаться каждые 24 секундыJavascript setInterval function.

Моя проблема заключается в том, что для содержимого прямо под замороженным div установлен верхний отступ: 36px, чтобы гарантировать, что замороженный div не будет покрывать или отображаться поверх тела.Эта проблема будет возникать, когда div уведомления исчезнет. Когда это произойдет, высота изменится (технически), и содержимое заголовка будет зависать над телом.Как заставить тело двигаться вниз или не быть покрытым?

Answer 1

используйте метод jQuery Prepend() перед тегом body для замороженного div

См. Мой пример: http://jsfiddle.net/uday99/XYJBy/

Answer 2

Вы всегда можете использовать relative, затем absolute позиционирование; оберните содержимое вашего тела в элемент уровня блока (например, div), затем установите position содержимого вашего тела relative и установите для свойства top значение 36px

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

Тогда в вашем CSS

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

Просто внедрите CSS в существующую таблицу стилей.

Answer 3

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

Затем, когда полоса исчезла:

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