什么是 bootstrap-autohide-navbar
bootstrap-autohide-navbar 是一个基于 Bootstrap 的 jQuery 插件，它可以自动隐藏和显示导航条，以提供更优秀的用户体验。当鼠标滚动页面时，导航条会自动隐藏，当鼠标停在页面顶部时，导航条又会自动显示。
安装
在使用之前，我们需要先安装 bootstrap-autohide-navbar：
npm install bootstrap-autohide-navbar
安装完成之后，我们就可以在项目中使用它了。
使用
在 HTML 文件中引入所需的文件：
<head> <link rel="stylesheet" href="path/to/bootstrap.css"> <script src="path/to/jquery.js"></script> <script src="path/to/bootstrap-autohide-navbar.js"></script> </head>
然后在 JavaScript 文件中，初始化这个插件：
$(function(){
$('.navbar-fixed-top').autoHidingNavbar();
});这里的 .navbar-fixed-top 是 Bootstrap 中自带的导航条固定在页面顶部的样式类名，可以根据实际情况修改。
配置选项
bootstrap-autohide-navbar 提供了一些配置选项，可以根据实际情况进行设置。以下是所有的选项：
-- -------------------- ---- ------- - -- ----------- -- ----- ------------------ ---- -- --------------------- -- ------ ----------- --- -- ----------- -- ---- -- -------- ---- -- -- ---------- ------ ----- -- --------- ------ ----- -- -------- -------------- ------ -- -------- -- ------- --------------- ----- -- -------- -- ------- ------------- ----- -- ------------- -- ------- ----------- ----- -- --------- -- ------- ------ ----- -- --------- -- ------- ------------ ----- -- ------------- ------- ---------- --- -- ------------- ------- ---------- --- -- ------------- ---------- ---------- -- -
示例
下面是一个完整的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ----------
----- ---------------- ---------------------------------------------------------------------
-------
---------------------- -
-------------- --
-
--------
-------
------
---- ------------- -------------- ------------------
---- ------------------------
---- ----------------------
------- ------------- -------------------- ---------- ---------------------- --------------------- --------------------- -----------------------
----- ---------------------- -----------------
----- ------------------------
----- ------------------------
----- ------------------------
---------
-- -------------------- --------------------------------------
------
---- ----------- ---------------------- ----------
--- ---------- ------------
--- ----------------- ----------------------
------ -----------------------
------ -------------------------
-----
------------------------ ---
--------------------------- ---
------
---- ------------------------
---------- -----------
--------- ------------------------- --------------
---------------------------- ----- --------- - ------ ------------------------------------------------------------------------
------
------- ------------------------------------------------------------------
------- ---------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------
--------
-------------
-----------------------------------------
-------------- --------
--------------
--------------------
---
---
---------
-------
-------在这个示例中，我们使用了 Bootstrap 的导航条，并固定在页面顶部。然后通过调用 autoHidingNavbar 方法来初始化 bootstrap-autohide-navbar，同时设置了一些配置选项。最后在 JavaScript 文件中引用了所需的文件。运行这个示例，你会发现在滚动页面的时候，导航条会自动隐藏和显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaf81e8991b448dc3f7