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

安装

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

$ bower install bootstrap-autohidingnavbar                  
                

使用方法

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

HTML结构

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

初始化插件

在页面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