粘性导航 – 为什么它变得透明且无法点击？

Question

我正在使用 Sticky.js ( http://stickyjs.com ) 在页面导航到达屏幕顶部后将其固定。到目前为止效果很好，除了一旦触发粘性似乎就会出现 z 索引或透明度问题。内容在固定导航下方过于明显地通过，在此期间导航链接无法可靠地选择。

\n\n

\n

\n\n

这是一个演示的快速屏幕流程： https: //web.archive.org/save/cl.ly/StqJ

\n\n

我的网站：https://livingibogaine.squarespace.com/detox/

\n\n

---

\n\n

HTML：

\n\n

/* jquery */ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>\n/* sticky script */ <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.sticky/1.0.0/jquery.sticky.min.js"></script>\n\n<script type="text/javascript">\n  $(window).load(function(){\n    $("#page-nav").sticky({ topSpacing: 0 });\n  });\n</script>\n\n<ul id="page-nav">\n  <a href="#chapter-1"><li>Iboga Ceremony</li></a>\n  <a href="#chapter-2"><li>Clinical Detox</li></a>\n  <a href="#chapter-3"><li>Medical Standards</li></a>\n  <a href="#canvas-wrapper"><li>Top \xe2\x86\x91</li></a>\n</ul>\n

\n\n

CSS：

\n\n

#page-nav {\n  /* structural stuff */\n  position: absolute; top: -40px; left: 0; right: 0; \n  padding: 0 1500px; margin: 0 -1500px;\n\n  /* non-essentials */ \n  text-align: center; font-size: 16px; line-height: 3em; \n  list-style: none; background-color: #A47938;\n}\n

\n

Answer 1

您的导航和内容都包含在具有类 的 div 中.sqs-block。这个班已经定了z-index: 1。问题是，z-index是相对于父级的，因此当您将 z-index 999 应用于导航时，这不会有明显的效果。解决方案是覆盖导航容器的 z-index。鉴于您当前的标记，此 CSS 将会执行此操作：

#content .row:first-child .sqs-block { z-index: 999; }

或者，您可以使用 jQuery 执行此操作：

$('#page-nav').closest('.sqs-block').css('z-index', '999');