qinyi素材网
当前位置: 首页 > jQuery素材 > Bootstrap 自动隐藏导航栏
  时间: 2021-10-22   阅读:1.1k

插件介绍

Bootstrap 自动隐藏导航栏是 Bootstrap 固定导航栏的扩展,它在页面向下滚动时隐藏导航栏并以另一种方式显示。该插件也能够以编程方式显示/隐藏导航栏。

简要教程

Bootstrap 自动隐藏导航栏是 Bootstrap 固定导航栏的扩展,它在页面向下滚动时隐藏导航栏并以另一种方式显示。该插件也能够以编程方式显示/隐藏导航栏。

使用方法

在html中引入jQuery和Bootstrap

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

引入插件js

<script src="js/jquery.bootstrap-autohidingnavbar.min.js"></script>

调用插件

$(".navbar-fixed-top").autoHidingNavbar({
  // see next for specifications
});

初始化参数对象

调用时,$(".navbar-fixed-top").autoHidingNavbar()您可以传递带有零个或多个以下参数的参数对象:

  • disableAutohide,默认为false,true如果您想以编程方式显示/隐藏导航栏,请将其设置为。
  • showOnUpscroll, 默认为'true', 向上滚动页面时显示导航栏(否则仅当滚动在页面顶部时显示)。
  • showOnBottom,默认为'true',当滚动到达页面末尾时显示导航栏。
  • hideOffset, 默认为'auto', 在滚动那么多像素后隐藏导航栏。Auto 表示导航栏的高度。
  • animationDuration, 默认为'200', 是以毫秒为单位的显示和隐藏动画的持续时间。
  • navbarOffset,默认为'0',导航栏不会从底部隐藏那么多像素。

监听事件

  • show.autoHidingNavbar 元素显示时触发。
  • hide.autoHidingNavbar 元素隐藏时触发。
var element = $(selector);

element.on("show.autoHidingNavbar", function() {
  // on show
});

element.on("hide.autoHidingNavbar", function() {
  // on hide
});

Bootstrap 自动隐藏导航栏的github网址为https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar

上一篇: 下一篇: