CSS-固定孩子时父母消失(即使设置了高度)

Question

我在创建粘性标头时遇到问题 - 当我将孩子的位置设置为"修复"时，它基本上会消失。这是我当前的情况：

• 标题：这是一个有两个孩子的父母（"徽标 - 容器"，这是静态的，和" nav"，是相对位置的）
• 滚动时，"徽标符合"显示属性设置为"无"
• 滚动时"导航"位置设置为"固定"
• 使用jQuery，我给标头的高度与我的nav相同，以便将其余的内容设置为固定时不会跳跃 - 但是我不知道为什么
  • 当我检查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

recied =元素相对于浏览器窗口定位。如果这对您的欢迎有所帮助。