所有分类
  • 所有分类
  • 最新发布

Bootstrap顶部悬浮自动隐藏导航菜单

2018102004381563

这是一款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():销毁插件

原文链接:https://www.7zt.cn/476.html,转载请注明出处~~~

0
广告位招租

评论0

疫情期间优惠活动!原XXX包年VIP,现XX;原XXX终身VIP,现XXX。随着资源不断增多,随时提价!立即查看
显示验证码
没有账号? 注册  忘记密码?