Push divs Inhalt für Alarm

Question

Ich habe eine feste Position Navbar, ich versuche, alles niederdrücken, wenn es nur eine Warnmeldung gibt. Der Alarm wird auch behoben

Ich habe versucht, meinen Inhalt in einem Div zu wickeln, aber es hat nichts getan.

Ich benutze Fundament 6 fand ich genau das, was ich hier suche http://www.bootply.com/4FSUjc2qej

aber es ist Bootstrap .. aber der obige Code funktioniert nur, wenn das nav statisch ist. Ich brauche die Nachricht, wenn sie über dem Nav angezeigt wird. aber wenn Sie klicken, um die Seite zu schließen, wird die Folie normal.

<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

Sie können dies tun, indem Sie eine feste Höhe für die Warnung festlegen, zum Beispiel 40px. Dann können Sie transition für die Animation verwenden, wie folgt aus:

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>

So, wenn die Warnung angezeigt wird, müssen Sie

1. Stellen Sie die Höhe der Warnung
2. Legen Sie den oberen Versatz der Website fest
3. Legen Sie den oberen Versatz der Navigationsleiste