Question

如何执行以下操作：

我希望在页面顶部设置粘性导航栏 - 固定导航栏 - （让我们称之为NavbarMain），但
当页面没有滚动时我想在NavbarMain上面加上一些带有链接的行 - linkRow - （可能像第二个菜单），它不是粘滞/固定的。

所以当页面没有滚动时我有

linkRow
NavbarMain

我有：

NavbarMain

linkRow将滚动，NavbarMain将替换它并坚持到顶部。

基本上我想要类似的东西： http://www.w3schools.com/html/default.asp 请注意，滚动时，顶部隐藏，菜单发生？我怎样才能在bootstrap中实现它。

谢谢

Answer 1

Bootstrap有一个名为“Affix”的插件，我想，它提供了你想要的东西。

只需在HTML中加入this Javascript file：

请阅读documentation here以获取有关如何使用它的说明。

来自文档的这个例子：

<div data-spy="affix" data-offset-top="60">
</div>

当你滚过它时，

应该在屏幕顶部显示div的60个像素。

Answer 2

设置词缀插件

您需要使用the affix plugin。它是标准的Bootstrap组件。

当页面在data-offset-top像素上滚动时，此插件会固定块：

计算滚动位置时的像素为offset from screen。

因此，您不需要使用.navbar-fixed-top课程。但您必须通过.navbar.affix类为固定导航栏设置一些CSS属性：

top: 0;属性设置固定导航栏的垂直位置;
属性left: 0; right; 0;强制导航栏扩展到屏幕宽度。

避免跳页

当导航栏固定时，它会丢失页面上的空间。你现在有两个麻烦：

导航栏下方的文字会跳起并隐藏在导航栏下。
页面高度降低。如果它小于窗口的高度，页面向下滚动，插件将导航栏返回到其位置。看起来好像导航栏不允许页面上升。

所以你需要一个CSS技巧。将margin-bottom添加到导航栏之前的块中，并将否定margin-top添加到导航栏。两个边距的值必须等于未固定导航栏的高度。

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.above {
  margin-bottom: 70px;
}
.navbar {
  margin-top: -70px;
}
.navbar.affix {
  margin-top: 0 !important;
  left: 0;
  right: 0;
  top: 0;
}

＆＃13;

<div class="container above">
  <h1>Hello</h1>
</div>

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="70">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse">
        <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="#">Brand</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
      </ul>
    </div>
  </div>
</nav>  

<div class="container">
  <p>Paragraph 1.</p><p>Paragraph 2.</p><p>Paragraph 3.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

引导。滚动链接菜单并修复页面顶部的导航栏

2 个答案:

设置词缀插件

避免跳页