简介
Headroom 是一个轻量级的 JavaScript 库，用于在用户滚动时动态更改页面元素的样式。它可用于创建吸顶效果、隐藏导航栏或固定元素等。
本文将介绍 Headroom 的使用方法，并提供示例代码以供参考。
安装
Headroom 是一个开源项目，可以通过 npm 安装：
--- ------- ----------- ------
使用
基本用法
为了使用 Headroom，需要先实例化一个 Headroom 对象并将其附加到要更改样式的元素上。下面是一个基本的示例：
HTML：
------- ------------------ ------ ------------ ---------
JavaScript：
------ -------- ---- -------------- ----- -------- - ------------------------------------- ----- -------- - --- ------------------- ----------------
对于这个示例，my-header 元素将在用户向下滚动时隐藏。当用户向上滚动时，它将重新出现。这是因为 Headroom 默认会添加 headroom--pinned 和 headroom--unpinned 类来控制元素的可见性。
自定义选项
Headroom 支持一些自定义选项，可以在实例化 Headroom 对象时传递。下面是一些常见的选项：
offset: 在滚动多少像素后触发 Headroom，默认为0。tolerance: 在滚动多少像素后开始隐藏元素，默认为0。classes: 要添加到元素的自定义类名。
下面是一个示例：
----- -------- - -------------------------------------
----- -------- - --- ------------------ -
------- ----
---------- -
--- ---
----- -
--
-------- -
------- ------------
--------- -------------
-
---
----------------在这个示例中，my-header 元素将在用户向下滚动 100 像素后隐藏。当用户向上滚动 10 像素时，它将重新出现。当用户向下滚动 5 像素时，它将再次隐藏。此外，Headroom 还将添加自定义的 is-pinned 和 is-unpinned 类来控制元素的可见性。
动态更新
可以通过调用 Headroom 对象的 destroy 方法来停用 Headroom。同样，也可以通过调用 init 方法重新启用它。
----- -------- - ------------------------------------- ----- -------- - --- ------------------- ---------------- -- ------ ------------- -- - ------------------- -- ------ --------------- - --- --------------------- - --- ---------------- -- ------
示例代码
下面是一个完整的示例，演示如何使用 Headroom 来创建一个带有吸顶效果的导航栏：
HTML：
--------- -----
----- ----------
------
----- ----------------
--------------- ---------------
----- ---------------- ----------------------------------------------------------------------------------------
----- ---------------- -------------------------------------------------------------------------------
-------
------
---- ---------------
---- --------------------
-- -------- ---------------------------
--- --------------- ------------ ----------------------
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
--
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------