Html 手机尺寸的不同导航栏样式&；桌面

我正在尝试为我自己的网站实现一种类似的导航样式，我在WordPress上的一个名为Enlive（见这里-）的模板上看到了这种样式。模板似乎有两个不同的导航。。。在移动设备中，它不是固定在顶部，而是在单击时展开。。当992px或更宽时，导航会在顶部展开，并在滚动时固定

---

有人能帮我实现这样的导航吗？能给我指个正确的方向吗？我正试图更熟悉Bootstrap3，但主要是学习了Bootstrap4的课程

---

谢谢！：）

添加滚动事件侦听器可以正常工作。 因此，您只需添加一个函数，在滚动时更改导航的样式。 例如，您可以更改背景颜色、颜色、高度等

$（文档）.ready（函数（）{
如果（document.documentElement.clientWidth>480）{
$（“#菜单”）.addClass（“导航栏固定顶部”）；
}否则{
$（“#菜单”）.removeClass（“导航栏固定顶部”）；
}
});

引导盒


















abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

abc

工作引导链接：

对于button，必须使用button类
切换折叠，用于在单击按钮时切换导航菜单
和媒体查询，只显示小屏幕的按钮

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header navbar-right">
        <p class="navbar-text">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>


//css

body {
    padding-top:70px;
}

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}









//css
身体{
填充顶部：70px；
}
@介质（最大宽度：990px）{
.导航栏标题{
浮动：无；
}
.导航栏切换{
显示：块；
}
.导航栏倒塌{
边框顶部：1px实心透明；
盒影：插入0 1px 0 rgba（255255,0.1）；
}
.navbar-collapse.collapse{
显示：无！重要；
}
.导航栏导航{
浮动：无！重要；
利润率：7.5px-15px；
}
.navbar nav>li{
浮动：无；
}
.导航栏导航>李>a{
填充顶部：10px；
垫底：10px；
}
}
我回答了一个问题

通过引导，这种类型的导航栏可以使用ScrollSpy组件“观察”滚动位置，并在滚动位置到达特定点时更改样式。您将得到两种不同的nabvar样式

   /* navbar style once attached to the page */ 
   .affix {
         background-color: black;   
    }

    @media (min-width:768px) {
        .affix-top {
          /* initial navbar style at top */
          background-color:transparent;
          border-color:transparent;
          padding: 15px; 
        }
    }

演示：
在移动设备上，我正在寻找一个不固定在顶部的导航，Raylon。回复任意大小的手机。Gotame这不是我要找的。。我不想移动设备上的导航一直固定在顶部。。我想让它滚动。。我只希望导航在桌面屏幕的顶部保持固定。“主要是在Bootstrap4上学习的课程”？这是不寻常的，因为它仍然在阿尔法