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