【问题标题】:How to keep my navigation stick to the top?如何让我的导航保持在顶部?
【发布时间】:2014-07-25 02:36:13
【问题描述】:

我一直在尝试一些不同的教程,了解如何在滚动时将导航栏固定在顶部,但无法正常工作:/

这是我遇到问题的页面: http://www.vernietig.be/vcs/index.html

在此先感谢您帮助我解决这个问题!

【问题讨论】:

  • 提示:使用media queries 为较小的视口(例如移动设备)制定一个特殊规则,这样菜单就不会粘在那里。试图在手机屏幕的一半是菜单的小屏幕上阅读内容是一件非常烦人的事情。

标签: html css navigation sticky


【解决方案1】:

试试这个:

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

【讨论】:

    【解决方案2】:

    这会将您的导航置于顶部:

     #yourTopNav{
        top : 0;
        position : fixed;
        }
    

    【讨论】:

    • 尝试添加这 2 条规则,但添加到:.nav-collapse, .nav-collapse * { -moz-box-sizing:border-box; -webkit-box-sizing:边框框; box-sizing:边框框; } OR .nav-collapse, .nav-collapse ul { list-style: none;宽度:100%;向左飘浮;导航消失...当我尝试将其添加到新的 .nav-collapse {} 时,没有任何变化......
    【解决方案3】:

    将此添加到您的 CSS:

    body { margin-top: 55px; }
    nav { position: fixed; clip: auto; }
    

    我不知道为什么你有 clip: rect(0,0,0,0) 但它隐藏了整个菜单,你甚至可能必须内联该指令,或者删除导致它的 .nav-collapse 类(但我真的不知道如何你的菜单应该可以工作吗:P)。

    【讨论】:

    • 在头部添加了这两条规则,以确保它最后加载但不起作用......
    • 哦,这是因为规则的特殊性,例如,如果您将id 分配给您的nav,并将第二行更改为#nav_id { position: fixed; clip: auto; },它将是最后应用的规则。
    猜你喜欢
    • 2013-03-27
    • 1970-01-01
    • 1970-01-01
    • 2023-03-09
    • 1970-01-01
    • 1970-01-01
    • 2014-01-16
    • 2021-08-27
    • 2012-12-07
    相关资源
    最近更新 更多