CSS - 子が固定されていると親が消えます（高さが設定されていても）

Question

私はスティッキーヘッダーを作成する際に問題があります。 これは私の現在のシナリオです：

• ヘッダー：それは（、静的であるのロゴ-コンテナ '、 と相対位置である「NAV」）2人の子供を持つ親の
• 「logo-スクロール時に 'container'の表示プロパティが 'none'に設定されています
• スクロール時に 'nav'の位置が 'fixed'に設定されています
• jqueryを使用しています。 navがfixedに設定されているとコンテンツがジャンプしませんが、それはありません。理由はわかりません。
  • Firebugをチェックすると、ヘッダが '60px'の高さ（ 'nav'と同じ高さ）であることがわかります。高さが適用されていますが、高さが設定されているかのように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'); 
     } 
    }) 
}) 

ありがとうございます！

Answer 1

固定=要素がブラウザウィンドウに対して配置されています。それがあなたの歓迎よりも助けてくれれば。