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

Question

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

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

所以当页面不滚动时我有

linkRow
NavbarMain

页面滚动后我有：

NavbarMain

linkRow 将滚动，NavbarMain 将替换它并固定在顶部。

基本上我想要类似的东西： http://www.w3schools.com/html/default.asp 请注意，当您滚动时，顶部被隐藏并且菜单发生？我如何在引导程序中实现它。

谢谢

Answer 1

Bootstrap 有一个名为“Affix”的插件，我认为它可以提供您想要的。

只需在您的 HTML 中包含 this Javascript file：

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

文档中的这个例子：

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

当您滚动过去时，应在屏幕顶部保持 60 像素的 div 可见。

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 添加到导航栏。两个边距的值必须等于未固定导航栏的高度。

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