我有一个菜单的div容器,简单示例:
<div class="nav-container">
<div id="corp-crumb">
<ul class="vertlist" id="ulTop">
<li class="crumblink submenu"><a id="createNewLink" href="#" title="Create New" class="crumblink">Create New</a>
<ul>
<li><a href="/Views/Company/Create.aspx" title="Company">Company</a></li>
<li><a href="/Views/Contact/Create.aspx" title="Contact">Contact</a></li>
<li><a href="/Views/Corporate/Create.aspx" title="Corporate Group">Corp. Group</a></li>
<li><a href="/Views/Issue/Create.aspx" title="Issue">Issue</a></li>
<li><a href="/Views/Program/Create.aspx" title="Program">Program</a></li>
<li><a href="/Views/Project/Create.aspx" title="Project">Project</a></li>
<li><a href="/Views/SubProject/Create.aspx" title="Sub Project">Sub Project</a></li>
</ul>
</li>
</ul>
</div>
</div>
此菜单位于我的所有页面的顶部,当用户滚动页面时,我确保菜单仍然可以通过jquery看到,其效果如下:
var nav = $('.nav-container');
var cc = $("#corp-crumb");
$(window).scroll(function () {
marginTop = ($(document).scrollTop() - scroll) + marginTop;
scroll = $(document).scrollTop();
if ($(this).scrollTop() > 50) {
nav.addClass("f-nav");
cc.addClass("addShadow");
} else {
nav.removeClass("f-nav");
cc.removeClass("addShadow");
}
});
这基本上说如果用户滚动添加类&#34; f-nav&#34;到div导航,这是上面显示的nav-container
。 f-nav类具有以下定义:
.f-nav {
z-index: 9999;
position: fixed;
left: 10px;
top: 0;
width: 100%;
} /* this make our menu fixed top */
如果用户滚动回到顶部,我们将删除此类,如jquery else条件所示。这很好......但是当有人靠近我的页面上的某些按钮时,z-index导致用户无法点击按钮,例如在此屏幕截图中显示:
在chrome开发人员工具中如果取消选中z-index我现在可以单击一个按钮,但是我的菜单会在页面后面发送,如下所示:
是否有一些神奇的CSS可用,所以这不会发生?我不知道为什么会导致这个问题...
答案 0 :(得分:2)
我会说你的导航所需的高度更高。它下方有一个透明的空间,可以遮盖其他按钮。这可以是导航链接上的任何边距或填充。由于我们没有所有代码,因此很难确定究竟出现了什么问题。
尝试将高度添加到f-nav。
.f-nav {
z-index: 9999;
position: fixed;
left: 10px;
top: 0;
width: 100%;
height: 20px; /* Limit the height */
overflow: hidden; /* Make sure no content overflows */
}
答案 1 :(得分:0)
你的导航容器div下面的div需要在顶部填充以防止元素进入你的导航div。
<div class="nav-container">
<!--Lots of other elements-->
</div><!--closing the nav-container div-->
<div id='div-under-nav'>
<!--Your div with the buttons that gets into trouble-->
</div>
以上片段是我对你情况的假设。假设您的导航容器高度为30px,那么您的div-under-nav的前30px位于其下方。
解决这个问题,将其设置在CSS中
#div-under-nav{padding-top: 30px;}
很抱歉所有的伪代码,但你没有给我很多工作。
答案 2 :(得分:0)
根据图片,可能是因为点击部分半透明阴影层(corp-crumb)而不是底层按钮。
您可以通过将菜单阴影替换为纯色done by others来测试是否是这种情况。或者通过删除corp-crumb和完全引用它的js位。这样,当单击菜单阴影层或其下方的按钮时,很容易看到。
答案 3 :(得分:0)
您可以使用.f-nav
来避免pointer-events:none;
捕获点击事件,它不应该影响内部链接。
.f-nav {
z-index: 9999;
position: fixed;
left: 10px;
top: 0;
width: 100%;
pointer-events:none; /* avoid this wrapper to catch click events */
} /* this make our menu fixed top */
答案 4 :(得分:0)
这是菜单下面的阴影层,它具有相同的z-index值,导致按钮保持在它下面并且无法访问,我相信。