Я использую Sticky.js (http://stickyjs.com), чтобы прикрепить навигацию к моей странице, как только она достигнет верха экрана. Пока работает хорошо, за исключением того, что после срабатывания прилипания возникает проблема с z-индексом или прозрачностью. Контент проходит слишком заметно под фиксированной навигацией, во время которой навигационные ссылки не могут быть надежно выбраны.
Вот краткий скриншот для демонстрации: 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;
}