Html 为什么'；引导导航栏移动菜单是否出现？

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

代码是：

<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>

您还可以检查项目的代码笔页面：

.navbar内部位置固定将使您的菜单稳定，即使您向下滚动

若要更改滚动条上的菜单颜色，请检查此答案

.navbar内部位置固定将使您的菜单稳定，即使您向下滚动

---

要更改滚动菜单的颜色，请检查此答案。

您需要使用与按钮中的

数据目标使用的相同名称作为菜单的div id。在这种情况下，它是“bs-example-navbar-collapse-1”
因此，将
id=“bs-example-navbar-collapse-1
添加到
div class=“collapse-navbar-collapse”

对于navbar，如果您使用bootstrap实现所需功能，则无需使用CSS。将“navbar fixed top”类添加到
nav
元素中

当您使用这个类时，您需要添加
body{padding bottom:70px；}
。这会将页面内容推到导航栏下。70px适用于您的示例，但可以根据需要进行更改。
您需要使用与按钮中的
数据目标使用的相同名称作为菜单的div id。在这种情况下，它是“bs-example-navbar-collapse-1”
因此，将
id=“bs-example-navbar-collapse-1
添加到
div class=“collapse-navbar-collapse”

对于navbar，如果您使用的是引导功能，则不需要使用CSS。将“导航条固定顶部”类添加到
nav
元素中

当您使用这个类时，您需要添加
主体{padding bottom:70px；}
。这会将页面内容推到导航栏下。70px适用于您的示例，但可以根据需要进行更改。
回答您的两个问题：

在使用引导时，已经处理了响应性。如果在HTML上提供了正确的标记，则引导将处理mobile view上的菜单。因此，当您向下调整到移动视图时，导航栏右侧会有一个“汉堡包菜单”，用于切换菜单选项

接下来，如果您希望在向下滚动时标题保持在顶部。引导已经提供了它。您只需在
上用
导航栏固定顶部
替换类
导航栏反向
。同样重要的是，删除为
navbar内部提供的不必要的
位置：绝对
属性

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

接下来，要在滚动时更改导航栏的背景，您需要添加两个简单的更改，一个添加到JavaScript（使用JQuery）中，另一个添加到CSS中，这两个更改是同时进行的

JQuery：

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

CSS:

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


注:

显然，不要忘记包含JQuery库，以便JavaScript正常工作，或者您也可以使用普通JavaScript进行同样的操作


如果您确实包含JQuery，因为您使用的是Bootstrap v3.3.6，JQuery版本需要高于1.9.1，但也低于3。所有这些你都能找到


成交
 回答您的两个问题：

在使用引导时，已经处理了响应性。如果在HTML上提供了正确的标记，则引导将处理mobile view上的菜单。因此，当您向下调整到移动视图时，导航栏右侧会有一个“汉堡包菜单”，用于切换菜单选项

接下来，如果您希望在向下滚动时标题保持在顶部。引导已经提供了它。您只需在
上用
导航栏固定顶部
替换类
导航栏反向
。同样重要的是，删除为
navbar内部提供的不必要的
位置：绝对
属性

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

接下来，要在滚动时更改导航栏的背景，您需要添加两个简单的更改，一个添加到JavaScript（使用JQuery）中，另一个添加到CSS中，这两个更改是同时进行的

JQuery：

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

CSS:

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


注:

显然，不要忘记包含JQuery库，以便JavaScript正常工作，或者您也可以使用普通JavaScript进行同样的操作


如果您确实包含JQuery，因为您使用的是Bootstrap v3.3.6，JQuery版本需要高于1.9.1，但也低于3。所有这些你都能找到


成交
 试试下面的代码



切换导航






尝试以下代码



切换导航



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