Bootstrap 自动隐藏导航栏是 Bootstrap 固定导航栏的扩展，它在页面向下滚动时隐藏导航栏并以另一种方式显示。该插件也能够以编程方式显示/隐藏导航栏。

使用方法

在html中引入jQuery和Bootstrap

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

引入插件js

<script src="js/jquery.bootstrap-autohidingnavbar.min.js"></script>

调用插件

$(".navbar-fixed-top").autoHidingNavbar({
  // see next for specifications
});

初始化参数对象

调用时，$(".navbar-fixed-top").autoHidingNavbar()您可以传递带有零个或多个以下参数的参数对象：

• disableAutohide，默认为false，true如果您想以编程方式显示/隐藏导航栏，请将其设置为。
• showOnUpscroll, 默认为'true', 向上滚动页面时显示导航栏（否则仅当滚动在页面顶部时显示）。
• showOnBottom，默认为'true'，当滚动到达页面末尾时显示导航栏。
• hideOffset, 默认为'auto', 在滚动那么多像素后隐藏导航栏。Auto 表示导航栏的高度。
• animationDuration, 默认为'200', 是以毫秒为单位的显示和隐藏动画的持续时间。
• navbarOffset，默认为'0'，导航栏不会从底部隐藏那么多像素。

监听事件

• show.autoHidingNavbar 元素显示时触发。
• hide.autoHidingNavbar 元素隐藏时触发。

var element = $(selector);

element.on("show.autoHidingNavbar", function() {
  // on show
});

element.on("hide.autoHidingNavbar", function() {
  // on hide
});

Bootstrap 自动隐藏导航栏的github网址为https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar