Question

我在创建粘性标题时遇到问题 - 当我将其子位置设置为“固定”时，它基本上消失了。这是我目前的情况：

标题：它是一个有两个孩子的父母（'logo-container'，这是静态的，和'nav'是相对定位的）
滚动
滚动时“导航”位置设置为“固定”
使用jquery我给标题提供与导航相同的高度，这样当导航设置为固定时其余内容不会跳转 - 但确实如此，我不知道为什么
- 当我查看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

Fixed =元素相对于浏览器窗口定位。如果这比你的欢迎更有帮助。

CSS - 父项在子项被修复时消失（即使其高度已设置）

1 个答案: