Bootstrap Auto-Hiding Navbar是一款非常实用的在页面滚动时自动隐藏Bootstrap顶部导航菜单的jQuery插件。它通过扩展原生Bootstrap顶部固定导航菜单，使其在页面向下滚动时隐藏，向上滚动时又显示出来。

安装

可以通过Bower来安装该导航菜单插件。

$ bower install bootstrap-autohidingnavbar

使用方法

使用该导航菜单插件需要在页面中引入bootstrap相关的文件，以及jquery和jquery.bootstrap-autohidingnavbar.min.js文件。

<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.bootstrap-autohidingnavbar.min.js"></script>
HTML结构

该导航菜单使用标准的bootstrap顶部固定导航菜单的HTML结构。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#">Auto hiding navbar</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Default</a></li>
      </ul>
    </div>
  </div>
</div>
初始化插件

在页面DOM元素加载完毕之后，可以通过autoHidingNavbar()方法来初始化该导航菜单插件。

$(".navbar-fixed-top").autoHidingNavbar({
  // 配置参数
});

配置参数

  • disableAutohide：默认为false，如果你想以编程的方式来显示或隐藏导航菜单，设置为true。
  • showOnUpscroll：默认为true，在页面向上滚动时显示导航菜单。
  • showOnBottom：默认为true，在滚动到页面底部时显示导航菜单。
  • hideOffset：默认为auto，设置在滚动多少像素之后隐藏导航菜单，Auto的意思是设置为导航菜单的高度。
  • animationDuration：默认为200，显示或隐藏导航菜单的时间，单位毫秒。

方法

调用方法的语法如下：

$(selector).autoHidingNavbar(methodName, parameter);

可用的方法有：

  • setDisableAutohide(value)：修改disableAutohide参数。
  • setShowOnUpscroll(value)：修改showOnUpscroll参数。
  • setShowOnBottom(value)：修改showOnBottom参数。
  • setHideOffset(value)：修改hideOffset参数。
  • setAnimationDuration(value)：修改animationDuration参数。
  • show()：以编程的方式显示导航菜单。
  • hide()：以编程的方式隐藏导航菜单。
  • destroy()：销毁插件。

Bootstrap Auto-Hiding Navbar插件的github地址为：https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar