粘性导航 - 为什么它变得透明且不可点击？答案

【问题标题】：Sticky Nav – why does it become transparent and unclickable?粘性导航 - 为什么它变得透明且不可点击？
【发布时间】：2013-12-10 21:56:05
【问题描述】：

我正在使用 Sticky.js (http://stickyjs.com) 在页面导航到达屏幕顶部后将其粘贴。到目前为止运行良好，除了一旦触发粘性似乎存在 z-index 或透明度问题。内容在固定导航下方太明显，在此期间导航链接无法可靠地选择。

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

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

HTML：

/* jquery */ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
/* sticky script */ <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.sticky/1.0.0/jquery.sticky.min.js"></script>

<script type="text/javascript">
  $(window).load(function(){
    $("#page-nav").sticky({ topSpacing: 0 });
  });
</script>

<ul id="page-nav">
  <a href="#chapter-1"><li>Iboga Ceremony</li></a>
  <a href="#chapter-2"><li>Clinical Detox</li></a>
  <a href="#chapter-3"><li>Medical Standards</li></a>
  <a href="#canvas-wrapper"><li>Top ↑</li></a>
</ul>

CSS：

#page-nav {
  /* structural stuff */
  position: absolute; top: -40px; left: 0; right: 0; 
  padding: 0 1500px; margin: 0 -1500px;

  /* non-essentials */ 
  text-align: center; font-size: 16px; line-height: 3em; 
  list-style: none; background-color: #A47938;
}

【问题讨论】：

标签： javascript jquery css z-index sticky

【解决方案1】：

您的导航和内容都包含在具有.sqs-block 类的div 中。此类已设置z-index: 1。问题是，z-index 是relative to the parent，所以当您将 999 的 z-index 应用于导航时，这不会有明显的效果。解决方案是覆盖导航容器的 z-index。鉴于您当前的标记，这个 CSS 会做到这一点：

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

或者，您可以使用 jQuery 来做到这一点：

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

【讨论】：

漂亮！这非常有帮助，并且会为我的很多发展提供信息。谢谢！

【解决方案2】：

仅通过查看包含大量代码的网站来调试有点困难。我做了一个简单的方法，让 fixed 在没有任何库的情况下滚动菜单。正如您在我的jsfiddle 中看到的那样，我有一个标题、一个菜单和我的内容。我有一个onscroll 事件，一旦页面到达它，它就会为我的菜单设置一个固定的新类。如您所见，菜单位于任何元素之上并保持可点击状态。

也许你可以试试这样一个简单的解决方案，看看问题是否仍然存在。

【讨论】：

【解决方案3】：

找到了解决办法。如果你去 jquery.sticky.js，第126-130行有代码，改变z-index：

else {
        s.stickyElement
        .css('position', 'fixed')
        .css('top', newTop)
        .css('bottom', '')
        .css('z-index', 1);
      }

【讨论】：