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 */
}

希望有所帮助。

编辑

这也是因为这个选择器，你必须改变它，因为它变成fixed时结构的变化：

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

固定Navbar打破了展开菜单

1 个答案: