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

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

本文关键字：顶部 导航 链接 滚动 菜单 启动      更新时间：2023-09-26

我该如何执行以下操作：

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

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

linkRow
NavbarMain

滚动页面后，我有：

NavbarMain

linkRow 将滚动，导航栏主将替换它并粘在顶部。

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

谢谢

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

只需在HTML中包含此Javascript文件：

并阅读此处的文档以获取有关如何使用它的说明。

文档中的此示例：

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

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

设置后缀插件

您需要使用后缀插件。这是一个标准的引导组件。

此插件使页面在data-offset-top像素上滚动时修复块：

计算滚动位置时要从屏幕偏移的像素。

因此，您不需要使用 .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>

相关文章：