在前端开发中，实现页面滚动时固定导航栏的效果是一项常见的需求。而使用 headhesive 可以轻松实现此效果。
安装和引入
安装 headhesive：
--- ------- ---------- ------
在 HTML 文件中引入 headhesive 和样式文件:
------ ------- --------------------------------------------------------- ----- ---------------- ---------------------------------------------- -------
基本使用方法
在 JavaScript 中编写以下代码，即可实现导航栏固定：
------ ---------- ---- ------------- ----- ------ - --- ----------------------
以上代码首先导入了 Headhesive 类，并使用 CSS 选择器 .header 获取导航栏元素，然后通过 new Headhesive() 创建了一个 headhesive 实例进行初始化。这个实例会在页面滚动时自动添加或移除 .fixed 类，从而控制导航栏是否固定在页面顶部。
深入理解 headhesive
headhesive 提供了许多可配置的选项，可以根据实际需求进行调整。以下是几个常用的选项及其含义：
- offset: 距离页面顶部的偏移量，默认为 300。
- classes: 固定时要添加/移除的类名，默认为
fixed。 - onInit: 初始化回调函数。
- onStick: 导航栏固定时的回调函数。
- onUnstick: 导航栏取消固定时的回调函数。
例如，以下代码将偏移量设置为 100，同时添加了自定义的 sticky 类：
------ ---------- ---- -------------
----- ------ - --- --------------------- -
------- ----
-------- -
------- -----------------
-
---示例代码
以下是一个完整的示例代码，包含了导航栏固定和滚动到锚点等功能：
--------- -----
----- ----------
------
----- ----------------
----------------- ------------
------- ---------------------------------------------------------
----- ---------------- ----------------------------------------------
-------
---- -
------- --
------------ ------ -----------
-
------- -
------- -----
----------------- -----
------ -----
-------- -----
---------------- -------
------------ -------
-
-------- -
------- -------
-
-------- -
------- ------
-------- -----
---------------- -------
------------ -------
---------- -----
-
--------
-------
------
------- ---------------
-----
----
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
-----
------
---------
---- ----------------
---- ------------- ----------------------- -------
---- ------------- ----------------------- -------
---- ------------- ----------------------- -------
------
--------
------ ---------- ---- -------------
----- ------ - --- --------------------- -
------- ----
-------- -
------- -----------------
--
-------- -- -- ---------------------
---------- -- -- ----------------------
---
------------------------------ ------------- -- -
--------------------------- - -- -
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------