jquery - 固定导航栏破坏展开菜单

Question

我正在这个网站上提供帮助:www.noyoco.com。我最近添加了一个脚本来在用户滚动时将导航栏固定在顶部。

    <script type="text/javascript">
  $(document).ready(function() {
    var s = $("#main-nav");
    var pos = s.position();     
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});
</script>

但我不明白为什么展开菜单坏了。

在顶部时正常工作(脚本关闭)，在脚本打开时损坏(如果你有滚动)

有人可以帮忙吗？谢谢!

Answer 1

这是因为第二个菜单不在导航容器的绝对位置。它仅在 display: block; 和 display: none; 中，当您使用主菜单切换它时。

要解决这个问题，您可以像这样在父容器上添加一个相对位置:

.multi-level-nav {
  position: relative;
}

以及子菜单上菜单的绝对位置:

.tier-2 { 
  position: absolute; 
  left: 0; 
  right: 0;
  z-index: 2; /* to be above the slideshow */
}

希望对您有所帮助。

编辑

也是因为这个selector，当它变成fixed的时候，因为结构的改变，你不得不改变它:

.nav-row ul ul {
    display: none;
}