粘性导航 - 为什么它变得透明且不可点燃?

时间:2013-12-10 21:56:05

标签: javascript jquery css z-index sticky

我使用Sticky.js(http://stickyjs.com)一旦到达屏幕顶部就粘贴我的页面导航。到目前为止效果很好,除非触发粘性时似乎存在z指数或透明度问题。内容在固定导航下方过于明显,在此期间导航链接无法可靠地选择。

thing http://f.cl.ly/items/2t213y3M2S2R261K1K1V/Screen%20Shot%202013-12-10%20at%201.50.13%20PM.png

这是一个快速的屏幕流程来演示:http://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;
}

3 个答案:

答案 0 :(得分:2)

您的导航和内容都包含在div中,其中包含.sqs-block类。此类已设置z-index: 1。问题是,z-indexrelative to the parent,因此当您将z-index应用于导航时,这将没有明显的效果。解决方案是覆盖导航容器的z-index。鉴于您当前的标记,此CSS将执行此操作:

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

或者,您可以使用jQuery执行此操作:

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

找到解决方案。如果你去jquery.sticky.js, 第126-130行中有代码,更改z-index:

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