这是一款Bootstrap固定顶部导航菜单自动隐藏插件。该插件可以使Bootstrap固定顶部导航菜单在页面向下滚动时自动隐藏,支持bootstrap4和bootstrap3。
使用方法
在页面中引入的jquery.bootstrap-autohidingnavbar.min.js
<script src="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
:当导航菜单隐藏时触发。
完整示例
<script src="jquery.bootstrap-autohidingnavbar.min.js"></script>
<header>
导航栏内容
</header>
<script>
$("header").autoHidingNavbar();
</script>