CSS - Elternteil verschwindet, wenn Kind festgelegt ist (auch wenn seine Höhe eingestellt ist)

Question

ich Probleme haben, wenn meine klebrigen Kopf Erstellen - es verschwindet im Grunde, wenn ich auf seine Kinder Position ‚fixiert‘. Dies ist mein aktuelles Szenario:

• Header: es ist ein Elternteil mit zwei Kindern ('Logo-Container', die statisch ist, und 'nav', die relativ positioniert ist)
• die ‚Logo- Die Anzeigeeigenschaft des Containers wird beim Scrollen auf 'none' gesetzt
• die Position 'nav' beim Scrollen auf 'fixed' gesetzt
• mit jquery Ich gebe die Kopfzeile die gleiche Höhe wie mein Nav, so dass der Rest der Inhalt springt nicht, wenn nav auf Fest gesetzt - aber es funktioniert und ich habe keine Ahnung, warum
  • wenn ich Firebug überprüfen, zeigt es, dass mein Kopf sehen ‚60px‘ hoch (gleiche Höhe wie ‚nav‘), so dass die Höhe angelegt wird, aber ich kann ist, dass der Header fehlt, als ob seine Höhe eingestellt wurde 0

HTML:

<div id="container" class="container-fluid"> 
     <header class="row"> 
      <div id="logo-container" class="col-lg-10 col-lg-push-1"> 
       <img src="https//:placehold.it/150x30" alt="my img" id="logo"/> 
      </div> 
      <nav class="col-lg-12 no-padding"> 
       <ul id="nav-list" class="col-lg-12"> 
        <li>Link 0</li> 
        <li>link 1</li> 
       </ul> 
      </nav> 
    </header> 
    <div id="main-container" class="row"> 
      <div id="content" class="col-lg-10 col-lg-push-1 no-padding"> 
       // body 
      </div> 
    </div> 

CSS:

header { 
    background: green; 
} 

#logo-container { 
    padding: 20px 15px 20px 0px; 
} 

nav { 
    background: red;  
    position: relative; 
    height: 60px; 
} 
nav.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 
#nav-list { 
    text-align: right; 
    padding: 0 10% 0 0; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

#main-container { /* jumps when 'nav' is fixed */ 
    background: #FFFFFF; 
    padding: 30px 0; 
} 

JS:

$(function() { 

    var mainContainer = $('#main-container'); 
    var nav = $('nav'); 
    var navHeight = nav.outerHeight(); 
    var navPos = nav.offset().top; 
    var logoContainer = $('#logo-container'); 

    $(window).on('scroll', function() { 
     if ($(window).scrollTop() >= navPos) { 
      $('header').height(navHeight); // set its height so that it stays in place, even with a fixed-positioned child 
      nav.addClass('fixed'); 

     } 
     else { 
      logoContainer.show(); 
      nav.removeClass('fixed'); 
      $('header').removeAttr('style'); 
     } 
    }) 
}) 

Vielen Dank im Voraus!

Answer 1

fixed = Das Element ist relativ zu dem Browser-Fenster. Wenn das hilft, dann sind Sie willkommen.