jquery - 无效链接直到滚动

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 而不是 static(默认位置)。因此，将 position:relative 或 position:absolute 添加到您的 #menu-nav。

它在 scroll 之后起作用的原因是因为您正在将位置更改为 absolute