jquery - 粘性 header : sub menu doesn't show up

Question

我试图找到这个问题的答案，但似乎没有任何答案适用于我的情况。

我有一个标题，其中包括一个上部空间(在我的例子中称为“空白”)和一个位于其下方的菜单。

向下滚动时，标题会上升，菜单会按预期固定在屏幕顶部。

到目前为止一切顺利。

问题是这个菜单有一个子菜单。但是这个子菜单只有在菜单没有粘在屏幕顶部时才有效。

现在，我知道这是因为当菜单“固定”时，子菜单也应该“固定”定位，但在我的情况下，它只是不起作用，因为子菜单是固定的，但它消失在其余菜单后面页面，我给它的任何 z-index(或者我给页面的任何其他组件的任何 z-index，真的)。

所以我觉得我尝试了所有可能想到的方法，但还是卡住了。

我制作了一个 JSFiddle，您可以测试我的脚本。 要复制错误，只需在标题未卡住时悬停菜单，然后向下滚动后再次执行相同操作。 当它没有卡住时它会工作，但子菜单不会出现。

感谢您的帮助。

HTML

<header>
    <div class="void"></div>
    <nav class="menu">
        <ul class="block">
            <li class="item">xxxxx</li>
            <li class="item">xxxxx</li>
            <li class="item drop">Hover here
                <div class="dropdown-content">
                    <a href="">submenu 1</a>
                    <a href="">submenu 2</a>
                </div>
            </li>
            <li class="item">xxxxxx</li>
        </ul>
    </nav>
</header>

CSS

body{
    width:100%;
    height:6000px;
    margin:0px;
    padding:0px;
    background: #ccc;
}

header{
    position:relative;
    width:100%;
    background: #fff;
    z-index:1;
    height:146px;
}

.void{
    position:relative;
    width:100%;
    height:100px;
}

.menu{
    position:relative;
    width:100%;
    height:54px;
    background:#aaa;
}

.menu ul{
    height:100%;
    margin:0px;
    padding:0px;
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.item{
    display:inline-block;
    flex-direction: column;
    height:100%;
    color:#41546F;
    line-height:54px;
    font-size:13px;
}

.block {
    position: relative;
    z-index:1;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 140px;
    z-index: 1;
    margin-left:-40px;
    margin-top:0px;
    background:#21242b;
    padding:16px;
}

.dropdown-content a {
    display: block;
    color:#a2a9b9;
    line-height:32px;
}

.drop a:hover {
    color: #fff;
}

.drop:hover .dropdown-content {
    display: block;
}

.fixed{
    position: fixed;
    overflow: hidden;
    left:0px;
    top: 0px;
}

JQUERY

$(window).scroll(function() {
    if ($(document).scrollTop() > 92){
        if (!$('.fixed').length){$('.menu').addClass('fixed');}
    } 
    else {
        if ($('.fixed').length){$('.menu').removeClass('fixed');}                  
    }     
});

JSFiddle

https://jsfiddle.net/3xnjeh01/

Answer 1

问题是 overflow: hidden on .fixed。
它隐藏了子菜单，您只需将其删除即可。

.fixed {
    position: fixed;
    left: 0;
    top: 0;
}