I've been trying to troubleshoot this issue, but nothing seems to quite fit my situation.
My header contains an empty space (referred to as "void" in my case) and a menu directly beneath it.
When scrolling down, the header moves up and the menu remains fixed at the top of the screen as expected.
Everything is functioning fine so far.
The problem arises with the submenu within the menu. The submenu only functions properly when the menu is not fixed at the top of the screen.
I understand that the submenu should have a "fixed" position when the menu is also "fixed," but despite my efforts, it just isn't working. The submenu does become fixed, but then it disappears behind the rest of the page, regardless of the z-index I assign to it or any other component on the page.
I feel like I've exhausted all possible solutions and I'm stuck.
I created a JSFiddle where you can test my script. To reproduce the bug, hover over the menu when the header is not fixed, and then do the same after scrolling down. It works when the menu is not fixed, but the submenu fails to appear when it is.
Thank you for your assistance.
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