Question

我试图创建一个导航稍微复杂的网站。我已经让导航看起来像我想要的初始加载，但现在我想在滚动时将它粘到导航到顶部。当导航栏到达顶部时，我已经能够创建一个类，但无法将其设置为粘性。每次我添加一个位置它都会跳回来。任何建议或帮助都会很棒。

以下是网站：http://www.figadvertising.com/anne/

需要在滚动上修复的div是moduletable_menu，当它到达页面顶部时，它还会将主导航滚动添加为类。

Answer 1

在添加课程main-nav-scrolled时，声明以下样式会将相关导航修复到菜单顶部。

<强> CSS

.main-nav-scrolled .top-menu li {
    display: inline-block;
    float: none;
}

.main-nav-scrolled .top-menu {
    position: fixed;
    top: 0;
    bottom: auto;
    z-index: 9;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}

Answer 2

看起来你真正需要的是将实际样式添加到.moduletable_menu ul元素而不是父元素。因此，只需将以下样式添加到子元素（在DevTools中测试）：

.moduletable_menu.main-nav-scrolled ul {
  position: fixed;
  top: 0;
  bottom: auto;
  z-index: 100;
}

目前，它似乎没有任何与新class相关联的样式。试试这个，让我知道它是否适用于你！

导航 - 修正

2 个答案: