导航 - 固定

Question

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

这是站点：http://www.figadvertising.com/anne/

需要固定在滚动条上的 div 是 moduletable_menu，当它到达页面顶部时，它也会作为 class 添加 main-nav-scrolled。

Answer 1

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

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

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

Answer 2

声明以下样式将在添加 class 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;
}

导航 - 固定

Navigation - Fixed

css

navigation

jquery