navbar oben fest schrumpfen mit einem Karussell ohne Überlappung

Question

Ich möchte diesen Effekt erhalten: www.kemtecnia.com Diese Website hat eine navbar feste Oberseite, die auf Scroll down schrumpft, hat unter einem Karussell behoben, das scheint durch den Inhalt unten verschwinden.

Wie kann ich in meinem Code tun, um es zu bekommen?

Ich habe die navbar top:

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header page-scroll"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Desplegar menú</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="logo" href="index.php"> 
      <img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" /> 
     </a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <?php 
      $i = 0; 
      foreach($menuItems as $menuItem => $url){ 
       if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == '')) 
        echo "<li class='active'>\n"; 
       else 
        echo "<li>\n"; 
       echo $url . $menuItem . "</a>\n"; 
       echo "</li>\n"; 
       $i++; 
      } 
      ?> 
     </ul> 
    </div> 
</div> 

aber scheint mein Karussell zu überlappen. Die Navbar schrumpft auch um js. Ich möchte erreichen, dass mein Karussell und das Karussell nicht mit dem Rest des Inhalts beim Blättern überlappen.

CSS der navbar:

@media(min-width:768px) { 
.navbar-fixed-top { 
    padding: 25px 0; 
    -webkit-transition: padding .3s; 
    -moz-transition: padding .3s; 
    transition: padding .3s; 
} 

.navbar-fixed-top .navbar-brand { 
    font-size: 2em; 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    transition: all .3s; 
} 

.navbar-fixed-top.navbar-shrink { 
    padding: 10px 0; 
} 

.navbar-fixed-top.navbar-shrink .navbar-brand { 
    font-size: 1.5em; 
} 
} 
.navbar a:focus { 
    outline: 0; 
} 

.navbar .navbar-nav { 
    letter-spacing: 1px; 
} 

.navbar .navbar-nav li a:focus { 
    outline: 0; 
} 

.navbar-default, 
.navbar-inverse { 
    border: 0; 
} 

Vielen Dank im Voraus so viel!

Edit: Codepen hier: http://codepen.io/jesfer/pen/oLvQYY

Answer 1

weiß nicht, ob das hilft ... aber könnte das sein, was Sie suchen oder atleast schieben Sie in die richtige Richtung.

http://codepen.io/MatthewBryce/pen/qZBPpp

HTML

<div class="headerWrap"> 
    <div class="headerWrapContent"> 
     Title 
    </div> 
    </div> 

    <div class="menuWrap"> 
    <div class="menuNavigationFloat"> 
     <a href="#">Home</a> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     <a href="#">Link 4</a> 
    </div> 
    </div> 

    <div class="headerMast"> 
     This is a Header 
    </div> 

    <div class="contentWrap"> 
    <h1>Page Content Bit</h1> 
    <p>A really simple sticky menu bar</p> 
    <p>Lorem ipsum dolor sit amet,</p> 
    </div> 

</div><div class="wrap"> 

    <div class="headerWrap"> 
    <div class="headerWrapContent"> 
     Stupidly simple stick-on-scroll Menu 
    </div> 
    </div> 

    <div class="menuWrap"> 
    <div class="menuNavigationFloat"> 
     <a href="#">Home</a> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
    </div> 
    </div> 

    <div class="headerMast"> 
     This is a Header 
    </div> 

    <div class="contentWrap"> 
    <h1>Page Content Bit</h1> 
    <p>A really simple sticky menu bar</p> 
    <p>Lorem ipsum dolor sit amet</p> 
    </div> 

</div> 

CSS

body { 
    color: #444;  
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; 
    margin: 0px; 
    background: #222; 
} 

.headerMast { 
    background: #AAA; 
    min-height: 200px; 
    max-height: 200px; 
    margin-top: 0px; 
    text-align: center; 
    padding-top: 110px; 
    color: #FFF; 
    -webkit-transition: 1s; /* Safari */ 
    transition: 1s; 
} 

.headerMastAnim { 
    margin-top: -300px; 
    margin-bottom: 300px; 
    -webkit-transition: 1s; /* Safari */ 
    transition: 1s; 
} 

.wrap { 
    background: #444; 
    overflow: auto; 
} 

.headerWrap { 
    background: #222; 
    font-size: 30px; 
    height: 100px; 
    line-height: 100px; 
    font-weight: lighter; 
    color: #CCC; 
} 

.headerWrapContent { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.menuWrap { 
    background: RGBA(0,0,0,0.7); 
    color: #fff; 
    height: 55px; 
    line-height: 60px; 
    letter-spacing: 1px; 
    width: 100%; 
    margin-bottom: -55px; 
    -webkit-transition: 0.4s; /* Safari */ 
    transition: 0.4s; 
    z-index: 100; 
    position: absolute; 
} 

.menuWrap.sticky { 
    position: fixed; 
    top: 0px; 
    height: 30px; 
    line-height: 30px; 
    -webkit-transition: 0.4s; /* Safari */ 
    transition: 0.4s; 
} 

.menuNavigationFloat { 
    background: RGBA(0,0,0,0.5); 
    padding: 0px 20px; 
    width: 80%; 
    height: inherit; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    overflow: hidden; 
} 

.menuNavigationFloat a{ 
    list-style: none; 
    color: #FFF; 
    font-size: 16px; 
    width: 170px; 
    height: auto; 
    margin-left: 0px; 
    margin-right: 0px; 
    padding-bottom: 2px; 
    display: inline-block; 
    text-align: center; 
    text-transform: capitalize; 
    text-decoration: none; 
    transition: background 0.4s, width 0.3s; 
} 

.menuNavigationFloat a:hover{ 
    text-decoration: none; 
    width: 200px; 
    transition: background 0.4, width 0.3s; 
} 

.menuNavigationFloat a:nth-child(1)   { background: #CC2222; } 
.menuNavigationFloat a:nth-child(1):hover { background: #FF3333; } 


.contentWrap { 
    background: #EEE; 
    width: 80%; 
    padding: 20px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 100px; 
    margin-bottom: 80px; 
    min-height: 1000px; 
} 

JS

$(window).scroll(function() { 
if ($(this).scrollTop() > 100) { 
    $('.menuWrap').addClass("sticky"); 
    $('.headerMast').addClass("headerMastAnim"); 
    } 
    else{ 
    $('.menuWrap').removeClass("sticky"); 
    $('.headerMast').removeClass("headerMastAnim"); 

    } 
}); 

http://codepen.io/MatthewBryce/pen/qZBPpp