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