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