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 - 父母在孩子固定时消失（即使其高度已设置）

回答

相关问题