CSS - 父母在孩子固定時消失（即使其高度已設置）

我在創建粘滯標頭時遇到了問題 - 當我將孩子的位置設置爲「固定」時，基本消失。這是我目前的情況：CSS - 父母在孩子固定時消失（即使其高度已設置）

頭：這是有兩個孩子的父母（「徽容器」，這是靜態的，和「導航」，這是相對定位）
的「logo-容器'顯示屬性設置爲'無'當滾動
'導航'位置設置爲'固定'時滾動
使用jquery我給頭與我的導航相同的高度，以便剩下的內容不會跳轉當導航設置爲固定 - 但它確實，我不知道爲什麼
- 當我檢查螢火蟲時，它顯示我的標題是'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'); 
     } 
    }) 
})

在此先感謝！

來源

2017-03-04 Acla

固定=該元素相對於瀏覽器窗口定位。如果這比你的歡迎有幫助。

來源

2017-03-04 23:15:31

是的，我知道。當一個元素被修復時，它被其他元素'忽略'，當我們使用粘性頭部時會導致這種跳躍效果。但是，我有一個'佔位符'（頭部本身，它是靜態的並且有一個高度設置），所以跳躍效果不應該發生。 – Acla

CSS - 父母在孩子固定時消失（即使其高度已設置）

回答

相關問題