Question

我有一个固定位置导航栏，如果只有警报消息，我试图压低所有内容。警报也将修复

我尝试将我的内容包装在div中，但它什么也没做。

我使用基础6我在这里找到了我正在寻找的http://www.bootply.com/4FSUjc2qej

但它是bootstrap ..但上述代码仅在nav是静态时才有效。我需要消息，如果显示保持固定在导航上方。但点击关闭网站幻灯片正常。

<div class="alert alert-info" role="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Holy guacamole!</strong> Best check yo self, you are looking very good.
</div>

<div id"site">
<nav class="nav">My Nav</nav>
<div>content</div>
</div>


    .alert-info {
      margin-bottom:0;
      position: fixed
    }


.nav {
    min-height: 50px;
    height: 50px;
    overflow: visible;
    background-color: #000;
    color: #fff;
    position: fixed;
    top: 0;
    z-index: 10000;
}

Answer 1

您可以通过为警报设置固定高度来执行此操作，例如40px。然后你可以使用transition作为动画，如下所示：

function showAlert() {
  document.getElementsByClassName("alert")[0].classList.add("active");
}

function closeAlert() {
  document.getElementsByClassName("alert")[0].classList.remove("active");
}

.alert {
  position: fixed;
  top: 0;
  height: 0;
  width: 100%;
  background-color: blue;
  color: white;
  transition: height .2s;
}

.alert.active {
  height: 40px;
}

#site {
  transition: margin-top .2s;
}

.alert.active + #site {
  margin-top: 40px;
}

.nav {
  display: block;
  width: 100%;
  min-height: 50px;
  height: 50px;
  overflow: visible;
  background-color: #000;
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 10000;
  transition: top .2s;
}

.alert.active + #site .nav {
  top: 40px;
}

.content {
  padding-top: 59px
}

<div class="alert alert-info" role="alert">
  <button type="button" class="close" data-dismiss="alert" onclick="closeAlert()">×</button>
  <strong>Holy guacamole!</strong> Best check yo self, you are looking very good.
</div>

<div id="site">
  <nav class="nav">My Nav</nav>
  <div class="content">
    <button onclick="showAlert()">alert</button>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

因此，当显示警报时，您必须

设置提醒的高度
设置网站的最高偏移量
设置导航栏的顶部偏移

推动divs内容提醒

1 个答案: