前言
在前端开发中，我们经常需要处理网页的交互和滚动效果。而对于单页应用程序，滚动监听是一项必不可少的功能。Gumshoe就是一个基于JavaScript的小型库，可以轻松实现页面滚动监听，帮助开发人员快速构建单页应用程序。
gumshoe 的安装
Gumshoe是npm包，因此首先需要确保已经安装了Node.js和npm。然后，在终端中输入以下命令进行安装：
npm install --save gumshoe
gumshoe 的使用
实例化 Gumshoe
要使用Gumshoe，需要先实例化它。可以使用以下代码来创建Gumshoe实例：
import Gumshoe from 'gumshoe';
const gumshoe = new Gumshoe('#navbar a', {
// options
});在上面的代码中，第一个参数'#navbar a'是要监听的菜单选项元素的选择器，这里假设我们的菜单项都是链接（a标签）且位于id为“navbar”的元素内。该元素的href属性将与当前页面的ID匹配以确定其是否处于活动状态。
第二个参数对象包含一些可选的选项。例如，您可以通过传递一个函数来自定义如何处理活动菜单项：
const gumshoe = new Gumshoe('#navbar a', {
// options
nested: true,
nestedClass: 'active-parent',
offset: function () {
return document.querySelector('#header').offsetHeight;
}
});Gumshoe 的选项
Gumshoe有一些可选的选项，可以通过第二个参数对象进行配置。
activeClass
默认为'active'。活动菜单项将使用此CSS类进行标记。
callback
一个回调函数，在标记菜单项时被调用。
const gumshoe = new Gumshoe('#navbar a', {
callback(active) {
console.log(`Active section is ${active}`);
}
});nested
默认为false。如果启用了嵌套，那么所有祖先元素也将被标记为活动状态。
nestedClass
默认为'active'。在启用嵌套的情况下，将所有祖先元素标记为此CSS类。
offset
默认为0。偏移量表示浏览器窗口顶部与网页文档顶部之间的距离。您可以传递一个函数来计算偏移量：
const gumshoe = new Gumshoe('#navbar a', {
offset() {
return document.querySelector('.sticky-header').offsetHeight;
}
});Gumshoe 示例代码
下面是一个完整的示例代码，演示了如何使用Gumshoe来监听单页应用程序中的滚动事件并将其应用于菜单项。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---------------
-------
---- -
------------ ------ -----------
------- --
-------- --
-
------ -
--------- ------
---- --
----- --
------ --
------- -----
----------------- --------
----------- - --- --- ---------------
-
--- -
-------- -----
---------------- -------
------------ -------
------- -----
-
-- -
----------- -----
------- --
-------- --
-------- -----
---------------- --------------
------ ----
-
-- -
------- --
-------- --
-
- -
---------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------