Menü festgelegt nach oben Fenstern durch div wird überrannt unter

Question

Ich versuche, ein Layout zu erstellen, die wie folgt aussieht, wo das Logo vorbei gescrollt werden kann, aber das Menü bleibt auf die oben auf der Seite festgelegt:

---

^^ Logo ^^
~ ~ ~ ~ ~ ~ ~ ~
** ** Menü
~ ~ ~ ~ ~ ~ ~ ~
Body text Textkörper Text.

---

This jsfiddle perfectly represents my plan. Ich benutze Bootstrap Affix-Plugin, um das Menü "sticky" beim Scrollen zu drehen, und das funktioniert gut. Das Problem ist, der Körper (section#main) rolls over the menu when I scroll up.

Site-Markup ist in etwa:

<header> 
    <div id="logo"></div> 
    <div id="nav-search"> 
     <div class="row"> 
      <div id="menu-top"></div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 
</header> 

<section id="main" class="row"> 
</section> 

Ich bin fest, herauszufinden, wie #nav-search davon zu überzeugen, sich zu enthalten. Ich setze eine Höhe auf #nav-search. Mit dem Z-Index kann ich das #nav-search div oben drücken, aber das bedeutet immer noch, dass im Moment, in dem das Menü angebracht wird, eine bestimmte Menge des Körpers verdunkelt wird. Was vermisse ich?

Answer 1

Dieses es für mich in dem Link, den Sie festgelegt gesendet:

#nav-wrapper.affix { 
    postion: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
}