Sticky Nav – why does it become transparent and unclickable?

Question

I'm using Sticky.js (http://stickyjs.com) to affix my page nav once it reaches to top of the screen. Works well so far, except for that there seems to be a z-index or transparency issue once the stickiness is triggered. The content passes too visibly beneath the fixed nav, during which the nav links are not reliably selectable.

Here's a quick screenflow to demonstrate: https://web.archive.org/save/cl.ly/StqJ

My site: 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;
}

Answer 1

Your navigation and content are both contained in divs, which have the class .sqs-block. This class has set z-index: 1. The problem is, z-index is relative to the parent, so when you apply a z-index of 999 to your navigation, this will have no apparent effect. The solution is to override the z-index for your navigations container. Given your current markup, this CSS will do it:

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

Alternatively, you can do this with jQuery:

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

Answer 2

A little hard to debug only by viewing your website which contains a lot of code. I made a simple way to have a fixed menu on scroll without any library. As you can see in my jsfiddle, i have a header, a menu and my content. I have an onscroll event that set a new class fixed to my menu once the page reach it. As you can see, the menu is on top of any element and stay clickable.

Maybe you can try a simple solution like this and see if the problem is still there.

Answer 3

Found a solution. If you go to jquery.sticky.js, There a code in line 126 - 130, change the z-index:

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