推divs内容的警报

Question

我有一个固定位置的导航栏，我试图推倒一切，如果只有一条警报消息。该警报将被固定也

我试图包装我的内容在一个部门，但它什么都没做。

我用粉底6我发现正是我这里寻找http://www.bootply.com/4FSUjc2qej

，但它是引导..但如果导航是静态的，上面的代码才有效。如果显示的信息需要保持固定在导航上方，我需要该信息。但是当点击关闭网站时滑到正常水平。

<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>

因此显示警报时，你将不得不

1. 设置警报
的高度
2. 设置网站的顶部偏移量
3. 设置导航栏的顶部偏移量