Question

出于某种原因，在我的网页上，粘性导航栏的javascript根本没有运行。这是jsfiddle。导航栏（亮橙色）贯穿页面顶部 - 标题底部。该脚本设置为在用户滚动一个点然后经过另一个点后使导航栏可见，这意味着在.offset().top;的帮助下将其固定到视口的顶部。

我在类似的实现中尝试了完全相同的脚本，但它确实有效。非常感谢任何人帮助指出故障。

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，但标题的z-index仍然小于div class =“contentwrap”的z-index。所以只需增加标题的z-index就可以了。

这是一个固定的小提琴：

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

JS：粘性导航栏未运行的脚本

1 个答案: