Question

我遇到了一个奇怪的HTML / JQuery问题。

我主页上的顶级导航栏有5个以HTML格式描述的链接。出于某种原因，在我滚动页面之前，链接不会“激活”。我只是通过简单地将位置从“绝对”更改为“固定”而将背景更改为透明黑色来操作滚动中的导航元素;但是这不应该对链接产生任何影响。

使用Chrome进行检查后，每个菜单项都会被链接。

这是在滚动时操纵导航的代码 -

$(document).scroll(function(){

      if (!docked && $(document).scrollTop() > 36){
        docked = true;
        $('#menu-nav').css('background','rgba(60,60,60,0.9)');
        $('#menu-nav').css('position', 'fixed');
        $('#menu-nav').css('top',0)
        $('#menu-nav').css('height',49+'px')
      }
      else if (docked && $(document).scrollTop() < buffer) {
        docked = false;
        $('#menu-nav').css('background','');
        $('#menu-nav').css('position', 'absolute');
        $('#menu-nav').css('top',0)
      }
})

页面在这里 - www.barandbean.com - 您可以看到链接无效，直到导航变为“固定”位置并滚动窗口。

任何帮助将不胜感激。我可以添加更多代码片段，但我不确定哪些内容最有用。

Answer 1

请注意，z-index需要静态以外的位置（这是默认位置）。请将position:relative或position:absolute添加到您的#menu-nav。

scroll之后的原因是因为您将位置更改为绝对

Answer 2

您需要将z-index:1;设置为菜单。

滚动时的非活动链接

2 个答案: