Question

我试图找到答案，但似乎没有什么适合我的情况。

我有一个标题，其中包括一个上部空间（在我的情况下称为“ void”）和一个位于其下方的菜单。

向下滚动时，标题会上升，并且菜单会按预期粘贴在屏幕顶部。

到目前为止很好。

问题是此菜单有一个子菜单。但是，此子菜单仅在菜单未粘贴在屏幕顶部时可用。

现在，我知道这是因为子菜单在“固定”时也应该“固定”在子菜单上，但是在我的情况下，它是行不通的，因为子菜单已经固定好了，但是在其余菜单后面消失了该页面，无论我给它的z索引是多少（或者我给页面的其他任何部分的z索引，实际上）。

所以我觉得我尝试了所有可能想到的东西，但被卡住了。

我制作了一个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上有.fixed。
它隐藏了子菜单，您只需要删除它即可。

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

标题粘滞：子菜单未显示

1 个答案: