HTML5自动隐藏菜单,Bootstrap固定顶部导航菜单自动隐藏插件

这是一款Bootstrap固定顶部导航菜单自动隐藏插件。该插件可以使Bootstrap固定顶部导航菜单在页面向下滚动时自动隐藏，支持bootstrap4和bootstrap3。

使用方法

在页面中引入的bootstrpa相关文件和jquery.bootstrap-autohidingnavbar.min.js。

初始化插件

在页面中插入bootstrap固定顶部导航菜单代码，然后通过下面的方法来初始化插件。

$(".navbar-fixed-top").autoHidingNavbar({

// 配置参数

});

配置参数

该Bootstrap固定顶部导航菜单自动隐藏插件的可用配置参数有：

disableAutohide：是否通过编程的方式来设置固定导航菜单的隐藏和显示。默认值为false。

showOnUpscroll：在页面向上滚动是显示导航菜单。默认值为true。

showOnBottom：在页面到达最底部时显示导航菜单。默认值为true。

hideOffset：在页面滚动到指定像素后才隐藏导航菜单。默认值为auto，表示导航菜单的高度。

animationDuration：显示和隐藏导航菜单动画的持续时间。默认为200毫秒。

navbarOffset：导航菜单在距离顶部多少像素前不隐藏。默认值为0。

事件

该Bootstrap固定顶部导航菜单自动隐藏插件的可用事件有：

show.autoHidingNavbar：当导航菜单显示时触发。

hide.autoHidingNavbar：当导航菜单隐藏时触发。

var element = $(selector);

element.on("show.autoHidingNavbar", function() {

// on show

});

element.on("hide.autoHidingNavbar", function() {

// on hide

});

方法

你可以通过内置的一些方法来改变默认的参数行为，大多数方法接收一个value值作为参数。调用方法的格式如下：

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

可用的方法有：

setDisableAutohide(value)：修改disableAutohide参数。

setShowOnUpscroll(value)：修改showOnUpscroll参数。

setShowOnBottom(value)：修改showOnBottom参数。

setHideOffset(value)：修改hideOffset参数。

setAnimationDuration(value)：修改animationDuration参数。

show()：以编程的方式显示导航菜单。

hide()：以编程的方式隐藏导航菜单。

destroy()：销毁插件。