Bootstrap。滚动 link 菜单并修复页面顶部的导航栏

Question

我怎样才能做到以下几点：

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

所以当页面不滚动时我有

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 像素上滚动时，此插件使块固定：

Pixels to offset from screen when calculating position of scroll.

因此您不需要使用 .navbar-fixed-top class。但是您必须通过 .navbar.affix class:

为固定导航栏设置一些 CSS 属性

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

避免页面跳转

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

导航栏下面的文字跳起来隐藏在导航栏下面
页面高度减小。如果它变得小于 window 的高度，页面向下滚动并且插件 returns 导航栏到它的位置。貌似navbar不允许页面上移

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

@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;
}

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

Bootstrap。滚动 link 菜单并修复页面顶部的导航栏

Bootstrap. Scroll link menu and fix the navbar at the top of the page

javascript

twitter-bootstrap-3

css-position

navbar

sticky

设置词缀插件

避免页面跳转