推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. 設置導航欄的頂部偏移量