I've implemented Sticky.js () to fix my page navigation once it reaches the top of the screen. Everything is working smoothly so far, except for a z-index or transparency issue that occurs when the stickiness is activated. The content seems to pass too visibly beneath the fixed navigation bar, making it difficult to reliably select the navigation links.
https://i.sstatic.net/QOWFt.png
Check out this quick screenflow demonstration: https://web.archive.org/save/cl.ly/StqJ
Visit my site here:
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;
}