CSS: положение: фиксированный сдвиг

Question

У меня есть собственный hellobar в основном шаблоне сайта. Я хотел бы переместить его из основного шаблона внутрь конкретной страницы.

Это hellobar, который всплывает через 5 секунд после загрузки страницы. Обратите внимание, что я удаляю всю часть javascript для упрощения. Если я изменю hellobar-wrapper на position: absolute или fixed, div будет располагаться в верхней части страницы, но поверх заголовка. Я хотел бы, чтобы изначально заголовок находился сверху, а когда отображается hellobar, он сдвигает заголовок ниже панели, так что заголовок все еще виден.

HTML:

    <!-- Remove hellobar from here -->
    <!--<div id="hellobar">Hellobar here</div>-->
    <!-- /hellobar -->  

    <!-- Header -->
    <div id="header">
        Header here.
    </div>

    <div id="content">
      <!-- hellobar should be here -->
      <div class="hellobar-wrapper">
        Hellobar content here
      </div>
      <!-- /hellobar -->
      <!-- More content here -->
      <div>
        more content here
      </div>
    </div>
 </body>

CSS:

.hellobar-wrapper {background-color: #fff; padding: 10px 0px; position: static; top: 0; width: 100%; z-index: 1; border-bottom: 1px solid #eee}

Answer 1

Я бы предложил вам добавить следующее в класс hellobar-wrapper в css:

display: none;

Более того, создайте в css следующий класс:

.active {
    display: block;
}

Наконец, добавьте к своему коду в Javascript следующее, когда вы загружаете обертку через пять секунд:

$(".hellobar-wrapper").addClass("active");

Приведенный выше код использует jQuery, поэтому добавьте следующее в свой код html :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>

Таким образом, через пять секунд с JavaScript вы правильно отобразите обертку, добавив класс .active, и по умолчанию спрятаете ее до пяти секунд с помощью css , Пожалуйста, также поменяйте местами заголовок и упаковщик. Обертка действительно не будет видна до 5 секунд, а заголовок будет сверху. Через пять секунд заголовок сместится, так как будет видна оболочка