CSS:位置:固定shift div

Question

我在一个网站的主模板中有一个自定义hellobar。我想把它从主模板移到一个特定的页面中。

这是一个在页面加载5秒后弹出的hellobar。请注意，为了简化，我删除了所有的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

我建议您在css的hellobar-wrapper类中添加以下内容：

display: none;

此外，在css中创建以下类：

.active {
    display: block;
}

最后，在5秒后加载wrapper时，在Javascript中添加以下代码：

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

上面的代码使用jQuery，因此在您的html代码中添加以下内容：

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

这样，在使用JavaScript的5秒之后，您将正确地显示包装器，添加了类.active，并且您将在使用css的默认5秒之前隐藏它。也请颠倒头部和包装器的位置。实际上，包装器在5秒之前是不可见的，并且头部将在顶部。5秒后，标头将移动，因为包装器将可见