导航菜单
Bootstrap顶部悬浮自动隐藏导航菜单
PetitQ
这是一款 Bootstrap 固定顶部导航菜单自动隐藏插件。该插件可以使 Bootstrap 固定顶部导航菜单在页面向下滚动时自动隐藏，支持 bootstrap4 和 bootstrap3。
使用方法：
在页面中引入的 bootstrpa 相关文件和 jquery.bootstrap-autohidingnavbar.min.js。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="dist/jquery.bootstrap-autohidingnavbar.min.js"></script>
初始化插件：
在页面中插入 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()：销毁插件
Github 地址：https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
