我正在使用 Sticky.js ( http://stickyjs.com ) 在页面导航到达屏幕顶部后将其固定。到目前为止效果很好,除了一旦触发粘性似乎就会出现 z 索引或透明度问题。内容在固定导航下方过于明显地通过,在此期间导航链接无法可靠地选择。
\n\n\n\n这是一个演示的快速屏幕流程: https: //web.archive.org/save/cl.ly/StqJ
\n\n我的网站:https://livingibogaine.squarespace.com/detox/
\n\nHTML:
\n\n/* jquery */ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>\n/* sticky script */ <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.sticky/1.0.0/jquery.sticky.min.js"></script>\n\n<script type="text/javascript">\n $(window).load(function(){\n $("#page-nav").sticky({ topSpacing: 0 });\n });\n</script>\n\n<ul id="page-nav">\n <a href="#chapter-1"><li>Iboga Ceremony</li></a>\n <a href="#chapter-2"><li>Clinical Detox</li></a>\n <a href="#chapter-3"><li>Medical Standards</li></a>\n <a href="#canvas-wrapper"><li>Top \xe2\x86\x91</li></a>\n</ul>\nRun Code Online (Sandbox Code Playgroud)\n\nCSS:
\n\n#page-nav {\n /* structural stuff */\n position: absolute; top: -40px; left: 0; right: 0; \n padding: 0 1500px; margin: 0 -1500px;\n\n /* non-essentials */ …Run Code Online (Sandbox Code Playgroud)