html - 为什么不显示 Bootstrap 导航栏移动菜单？

Question

我有两个问题。第一个也是最重要的是如何使缩小版本的菜单出现。我想要的第二件事是当我向下滚动时导航栏保持在顶部，并从现在的透明状态变为黑色。

代码是:

<nav class="navbar-inner navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Cosmos</a>
    </div>
   <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav pull-right">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    </div>
  </div>
</nav>

CSS 是:

.navbar-inner {
    background: transparent;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

你也可以查看元素的codepen页面: https://codepen.io/georgekech/pen/ZLNMGE

Answer 1

回答你的两个问题:

虽然已经处理了使用 Bootstrap 响应。如果在您的 HTML 上提供了正确的标记，bootstrap 将负责移动 View 上的菜单。因此，当您缩小到移动 View 时，导航栏右侧会出现一个“汉堡菜单”，用于切换菜单选项。

接下来，如果您希望在向下滚动时标题保持在顶部。 Bootstrap 已经提供了它。您只需替换类 navbar-inverse与 navbar-fixed-top在你的 <nav> 。同样重要的是删除不必要的 position: absolute赋予 navbar-inner 的属性

.navbar-inner {
   background: transparent;
   position: absolute; //remove
   top: 0; //remove
   right: 0; //remove
   left: 0; //remove
   z-index: 1;
}

接下来，要在滚动时更改导航栏的背景，您需要添加 2 个简单的更改，一个更改到您的 JavaScript(使用 JQuery)，另一个更改到您的 CSS，这两个更改齐头并进.

JQuery:

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

CSS:

.navbar-fixed-top.scrolled {
  background: black;
}

当您滚动超过导航栏的高度时，Jquery 基本上会向您的导航栏添加/删除(切换)一个类。当然，当从 JQuery 添加类时，CSS 只是添加背景颜色。

Your codepen here

注意:

1. Obviously don't forget to include the JQuery library for the JavaScript to work, alternatively you can do the same using plain JavaScript.

2. If you do include JQuery, since you're using Bootstrap v3.3.6, JQuery version needs to be higher than 1.9.1 but also lower than 3. All of which you can find here

交易完成!