javascript - JS : Script for sticky navbar not running

Question

出于某种原因，在我的网页上，粘性导航栏的 JavaScript 根本没有运行。这是jsfiddle 。导航栏(亮橙色)横跨页面顶部 - 位于页眉底部。该脚本设置为在用户滚动经过一个点然后再经过另一个点后使导航栏可见，这意味着借助 .offset().top 将其固定到视口(viewport)的顶部； .

我已经在类似的实现中尝试了完全相同的脚本，并且它有效。将不胜感激任何人帮助指出故障。

Answer 1

问题出在 html 布局中的 z-index

<header>
        <div class="mainheader">
        <img class="logo" src="images/logoinner.png">
            <img class="detail1" src="images/detail1.png">
        </div>

        <div class="subheader"></div>

        <div id="menu-wrapper">
          <nav id="menu">
            <div class="menu">
              <ul class="menu">
                <li>
                  <img class="logoflag" src="images/logoflag.png">
                </li>
              </ul>
            </div>
          </nav>
        </div>

</header>

<div class="contentwrap">
.....
</div>

您只设置了菜单包装 div 的 z-index，但 header 的 z-index 仍然小于 div class="contentwrap"的 z-index。因此，只需增加 header 的 z-index 就可以了。

这是一个固定的 fiddle :

https://jsfiddle.net/uh6e88n3/6/