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

这是一款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>

插件下载

© 版权声明
THE END
喜欢就支持一下吧
点赞14赞赏
分享
评论 抢沙发

请登录后发表评论